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

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

.btn

{

border: 0px;

background: red;

}

.btn1

{

border: 0px;

background: green;

}

.btn2

{

border: 0px;

background: yellow;

}

$().ready(function () {

$("#aa,#bb").btnEffect("btn", "btn1", "btn2", true);

$("#cc").btnEffect("btn", "btn1", "btn2", false);

});