先起個名字
當(dāng)然插件得有個名字，而且得有個文件名。按行規(guī)：
名字應(yīng)該是jQuery-xxxx
文件名應(yīng)該是jQuery.xxxx.js和jQuery.xxxx.min.js
盡量別跟github上的別的項目重名，除非你的插件能牛逼到成為github里的首選。
現(xiàn)在我準(zhǔn)備寫一個jQuery走馬燈插件，我搜了一下github，最終插件定名jQuery-scrollingmarquee，文件名定名jquery.scrollingmarquee.js和jquery.scrollingmarquee.min.js。
這個插件的靈感來自于我的文章：《根本不用插件，實現(xiàn)jQuery橫/縱向走馬燈》
編寫手冊
接下來就開始寫手冊。沒錯，插件雖然還沒開發(fā)，但是手冊必須先編寫出來，這就是計劃。這個手冊是給用戶看的，也是你要最終實現(xiàn)的。
HTML代碼準(zhǔn)備
就像上文我在《根本不用插件，實現(xiàn)jQuery橫/縱向走馬燈》說的，必須先準(zhǔn)備ul>li。
<div class="scrollingmarquee">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
要求使用者先創(chuàng)建類似上面的HTML結(jié)構(gòu)。注意上面的那個div.scrollingmarquee，必須作為ul元素的父元素，它用于遮擋溢出的li元素。然后讓使用者給ul元素自定義一個id屬性。本文假定用戶給ul元素定義的id值為sm。
CSS代碼準(zhǔn)備
給用戶提供基本的CSS代碼。
.scrollingmarquee {
width: 100%; /* 或視具體情況而寫，應(yīng)保證是li元素寬度的整數(shù)倍 */
height: 100%; /* 或視具體情況而寫，應(yīng)保證是li元素高度的整數(shù)倍 */
overflow: hidden;
}
.scrollingmarquee ul {
margin: 0;
padding: 0;
width: 100%;
height:100%;
}
.scrollingmarquee li {
display: block;
list-style: none;
float: left;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: red;
}
/* 下面這個重置聲明請按需設(shè)置，如果希望全部保持默認，請直接刪掉整個重置聲明 */
#sm li {
width: 25%; /* 這個值由使用者自行計算，支持設(shè)置絕對單位和相對單位，例如一行4個li，則這里可寫25% */
height: 50%; /* 這個值由使用者自行計算，支持設(shè)置絕對單位和相對單位，例如希望同時顯示兩行，則這里可寫50% */
float: left; /* 僅當(dāng)向右滾動時，此處改成right */
}
基本使用方法
不帶任何參數(shù)，也就是全部采用默認參數(shù)。關(guān)于參數(shù)，在下面講。
$('#sm').scrollingmarquee();
高級使用方法
$('#sm').scrollingmarquee({
parameter: value,
......
});
屬性列表
根據(jù)《根本不用插件，實現(xiàn)jQuery橫/縱向走馬燈》我們來分析、總結(jié)一下屬性：
.scrollingmarquee( options )
options
屬性名：direction
解 釋：滾動的方向，默認為left?？蛇x值：top、left、right。
類 型：String屬性名：totaltime
解 釋：單次滾動+單次停頓的用時，單位毫秒。默認值為2000，也就是2秒。
類 型：Number屬性名：scollingtime
解 釋：僅單次滾動的用時，單位毫秒。數(shù)值可等于但不得大于totaltime，否則按totaltime值計。當(dāng)數(shù)值等于totaltime值時，意味著不停頓連續(xù)滾動。當(dāng)不停頓連續(xù)滾動時，“scollingtime”或“totaltime”的值的存在意義在于設(shè)置li元素的初始靜止?fàn)顟B(tài)會維持多久時間。默認值為1000，也就是1秒。如果“totaltime”的值也保持默認，表現(xiàn)就是滾動1秒停頓1秒，以此循環(huán)。
類 型：Number屬性名：columns
解 釋：表示ul元素內(nèi)有幾列l(wèi)i元素，默認值為1，即ul有1列l(wèi)i元素。為保證視覺效果，此屬性的值必須為正整數(shù)，通常取1、2、3、4這樣的數(shù)字。在設(shè)置“columns”的值之前，請確認書寫了上面CSS代碼的重置聲明。
類 型：Number屬性名：rows
解 釋：表示可同時露出幾行l(wèi)i元素（僅用于縱向滾動的情況），默認值為1，為保證視覺效果，此屬性的值必須為正整數(shù)，通常取1、2、3這樣的數(shù)字。在設(shè)置“rows”的值之前，請確認書寫了上面CSS代碼的重置聲明。
類 型：Number
有一個在《根本不用插件，實現(xiàn)jQuery橫/縱向走馬燈》存在的CSS屬性我沒有列出，就是li的margin值。因為我在那篇文章中為了美觀，又能最簡化CSS，所以臨時用了li的margin值，但其實是不規(guī)范的。寫插件的時候，應(yīng)該將li的margin重置為0，因為li只是表示列表的語義，不要直接給它加過多的樣式，而且方便計算每個li的寬度值。同時插件不要給li設(shè)置padding，而是建議使用者給li內(nèi)部的元素加margin。
開工寫插件
(function ($) {
// 默認參數(shù)（放在插件外面, 避免每次調(diào)用插件都調(diào)用一次, 節(jié)省內(nèi)存）
var defaults = {
direction: 'left',
totaltime: 2000,
scollingtime: 1000,
columns: 1,
rows: 1
};
// 擴展
$.fn.extend({
//定義插件方法
scrollingmarquee: function(options) {
// 覆蓋默認參數(shù)
var opts = $.extend(defaults, options);
// 簡單判斷用戶定義的參數(shù)的有效性，這里可以將錯誤輸出到控制臺，但是我現(xiàn)在為了快速示范，就先不管報錯，判斷也只是粗略判斷
if ( !opts.direction || !/^(top|left|right)$/.test(opts.direction) ) {
opts.direction = 'left';
}
if ( !opts.totaltime || typeof (opts.totaltime - 0) !== 'number' || (opts.totaltime - 0) % 1 !== 0 ) {
opts.totaltime = 2000;
}
if ( !opts.scollingtime || typeof (opts.scollingtime - 0) !== 'number' || (opts.scollingtime - 0) % 1 !== 0 ) {
opts.scollingtime = 1000;
}
if ( !opts.columns || typeof opts.columns !== 'number' || (opts.columns - 0) % 1 !== 0 ) {
opts.columns = 1;
}
if ( !opts.rows || typeof opts.rows !== 'number' || (opts.columns - 0) % 1 !== 0 ) {
opts.rows = 1;
}
// 主函數(shù)
var that = this,
liwidth = $(this).width() / opts.columns,
liheight = $(this).height() / opts.rows,
easing = opts.totaltime != opts.scollingtime ? 'swing' : 'linear';
if ( opts.direction === 'left' ) {
$('.scrollingmarquee ul').css('width', '200%');
setInterval(function() {
$(that).animate({"margin-left": "-" + liwidth + "px"}, opts.scollingtime, easing, function() {
$(that)
.find("li:eq(0)").appendTo($(that))
.end().end().css({"margin-left": 0});
});
}, opts.totaltime);
} else if ( opts.direction === 'right' ) {
$('.scrollingmarquee ul').css('width', '200%');
setInterval(function() {
$(that).animate({"margin-left": liwidth + "px"}, opts.scollingtime, easing, function() {
$(that)
.find("li:eq(0)").appendTo($(that))
.end().end().css({"margin-left": 0});
});
}, opts.totaltime);
} else if ( opts.direction === 'top' ) {
setInterval(function() {
$(that).animate({"margin-top": "-" + liheight * opts.rows + "px"}, opts.scollingtime, easing, function() {
$(that)
.find("li").slice(0, opts.columns * opts.rows).appendTo($(that))
.end().end().end().css({"margin-top": 0});
});
}, opts.totaltime);
}
}
});
})(jQuery);
簡單說一下。
0、為了簡單起見，沒有考慮用戶把鼠標(biāo)懸停到走馬燈的時候暫停走馬燈的情況。
1、先寫個自執(zhí)行函數(shù)，把jQuery對象傳進去。
2、定義默認參數(shù)值。
3、給$定義一個插件方法。我們這個叫scrollingmarquee。
4、覆蓋默認參數(shù)。這里利用的是jQuery自帶的.extend()，它的作用是合并對象。
5、簡單判斷一下參數(shù)值的合法性，不合法的話最好是打印出來。只用考慮用戶不小心設(shè)置錯參數(shù)值，而不用過多考慮用戶會惡意設(shè)置參數(shù)的值，咱這只是個前端插件而已。
6、this指向的是插件方法的$對象，現(xiàn)在既然有一個setInterval()方法，為了簡單傳遞this的指向，可以寫一句var that = this。
7、主函數(shù)很容易理解，不解釋了。其中$('.scrollingmarquee ul').css('width', '200%');是向左或者向右滾動的時候，ul的寬度必須是200%，原因見《根本不用插件，實現(xiàn)jQuery橫/縱向走馬燈》。
8、到這里，這個插件就寫完了，是不是很簡單。如果想保證鏈?zhǔn)讲僮?，那么?code>scrollingmarquee方法的函數(shù)內(nèi)最后寫一句：return this;就OK了。
使用插件
給一個范例：往上滾動，每行4個li，同時可露出2行l(wèi)i，初始2秒后開始不停頓滾動。
首先編寫HTML代碼，和重置CSS代碼，方法見上面CSS代碼片段的注釋。
JS代碼：
$("#sm").scrollingmarquee({
direction: 'top',
columns: 4,
rows:2,
totaltime: 2000,
scollingtime: 2000
})
