jquery按钮状态效果正常、移上、按下_jquery
时间：2021-07-01 10:21:17
帮助过：5人阅读
在网页设计过程中，经常遇见按钮的各状态效果。写了一个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：
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryExtend_Default" %>
