首頁 >web前端 >js教程 >jquery 按鈕狀態效果 正常、移上、按下_jquery

jquery 按鈕狀態效果 正常、移上、按下_jquery

WBOY
WBOY原創
2016-05-16 17:26:061105瀏覽

在網頁設計過程中,常遇見按鈕的各狀態效果。寫了一個jquery擴展,使這個過程更方便!
使用前註意引用Jquery;
JqueryExtend.js:

複製程式碼 程式碼>
(function ($) {
// Button按鈕的三種樣式替換,如果isState參數為True則記錄按下狀態
$.fn.btnEffect = function (normal, mouseover, mousedown, isState) {
var lastButton;
this.each(function () {
$(this).bind({
mouseover: function () {
if (this != lastButton | | !isState) {
$(this).removeClass().addClass(mouseover)
}
},
mouseout: function () {
if (this != lastButton || !isState) {
$(this).removeClass().addClass(normal)
}
},
mousedown: function () {
if (this != lastButton || ! isState) {
if (lastButton != null) {
$(lastButton).removeClass().addClass(normal);
}

$(this).removeClass(). addClass(mousedown);
lastButton = this;
}
}
});
});
}
})(jQuery);

}
})(jQuery);

}
})(jQuery);
範例頁Default.aspx:複製程式碼

程式碼如下:

















div>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn