1、概述
先看看html代碼
CSS
例如我們要實現當遊標移動到a標籤上時，a標籤向右移動一段距離，離開時a位置恢復。實作方法如下：
複製程式碼
程式碼如下:
$(document).ready(>
$(document).ready(function() { $("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false.animate({ paddingLeft: "20px" }); , function() {
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
🎜>
現在我們將這個方法進行擴展，寫成jQuery插件的形式，以後也能在別的專案中使用，並且可以方便的更改一些屬性值，現在我們來看看jQuery插件的寫法。
2、jQuery插件的結構
下邊這個結構應該是寫jQuery插件的一個比較好的結構，我將原作者的一些註解做了對應的翻譯。
//為避免衝突，將我們的方法用一個匿名方法包起來
(function($) {
//擴展這個方法到jquery
$.fn.extend({
🎜> //遍歷配對元素的集合
return this.each(function() { 🎜> });
}
});
//傳遞jQuery到方法中，這樣我們可以使用任何javascript中的變數來取代"$"
})(jQuery);
接下來，我們在插件中加入一些可以改變的屬性，這樣使用者可以根據自己的需求來做一些更改。同時，我們應提供相應的預設值。
複製程式碼
程式碼如下:
(function($){
$.fn.extend({
//將可選擇的變數傳給方法
//設定預設值並用逗號隔開
var defaults = {
mouseOverColor : '#000000',
var options = $.extend(defaults, options);
return this.each(function() {
//這裡寫出對應程式碼
//可像下邊以以來求變值
alert(o.padding);
);; 🎜>})(jQuery);
3、實作jQuery外掛程式
複製程式碼 程式碼如下:
(function ($) {
$.fn.extend({
//插件名稱- pad //參數與預設值
var defaults = {
"Black"
};
var options = $.extend(defaults, options); var o = options;
var obj = $(this);
//使用ul中的a對象
var items = $("li a", obj);
items.hover(function () {
$(this).css( "color", o.hoverColor);
//queue false表示不加入動畫佇列paddingLeft: o.animatePadding }, { queue: false, duration: 300 } );
}, function () {
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
});
🎜>})(jQuery);
最後，使用外掛程式的方法如下：
複製程式碼
程式碼如下://使用外掛程式$(document). ready(function() {
