> 웹 프론트엔드 > JS 튜토리얼 > jquery 버튼 상태 효과 정상, 위로 이동, press_jquery

jquery 버튼 상태 효과 정상, 위로 이동, press_jquery

WBOY
풀어 주다: 2016-05-16 17:26:06
원래의
1095명이 탐색했습니다.

웹 디자인 과정에서 우리는 버튼의 다양한 상태 효과를 자주 접하게 됩니다. 이 프로세스를 더욱 편리하게 만들기 위해 jquery 확장을 작성했습니다!
사용하기 전에 Jquery를 인용하세요.
JqueryExtend.js:

코드 복사 코드는 다음과 같습니다. :

(function ($) {
//3가지 스타일의 버튼 교체, 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(mousedown);
lastButton = this;
}
})
}
}); );


샘플 페이지 Default.aspx:


코드 복사 코드는 다음과 같습니다. 🎜> < %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryExtend_Default" %>


"../jquery-1.7.1.js" type="text/javascript">


>


;/양식>

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿