Maison >interface Web >js tutoriel >jquery 按钮状态效果 正常、移上、按下_jquery

jquery 按钮状态效果 正常、移上、按下_jquery

WBOY
WBOYoriginal
2016-05-16 17:26:061105parcourir

在网页设计过程中,经常遇见按钮的各状态效果。写了一个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);

示例页面Default.aspx:
复制代码 代码如下:






















Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn