JavaScript는 슬라이딩 잠금 해제 기능을 구현합니다_기본 지식

실현 효과:

CSS 스타일 코드는 생략되었습니다.

html 코드:

jquery.mobile 및 jquery

를 페이지로 가져옵니다.

코드 복사 코드는 다음과 같습니다. http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> > http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"> >

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

~ > 슬라이드하여 내가 인간인지 확인하세요! ~ ~

js 코드:

코드 복사 코드는 다음과 같습니다. window.onload = 함수 () { var Slider1 = 새 Slider(); 슬라이더1.Init(); ///화면 크기가 변경될 때 트리거 $(window).resize(function () { 슬라이더1.HanderIn(); 슬라이더1.HanderOut(); }); } //슬라이더 막대 객체 기능 슬라이더(swipestart, min, max, index, IsOk, lableIndex) { var _self = this; //슬라이딩 시작 여부 _self.swipestart = swipestart; //최소값 _self.min = min; //최대값 _self.max = 최대; //슬라이더의 현재 위치 _self.index = index; //슬라이드 성공 여부 _self.IsOk = IsOk; //마우스가 슬라이딩 버튼 위치에 있습니다 _self.lableIndex = lableIndex; } //초기화 Slider.prototype.Init = 함수 () { var _self = this; $("#label").on("mousedown", 함수(이벤트) { var e = 이벤트 || _self.lableIndex = e.clientX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("mousemove", 함수(이벤트) { _self.HanderMove(이벤트); }); $(document).on("mouseup", 함수(이벤트) { _self.HanderOut(); }); $("#label").on("touchstart", 기능(이벤트) { var e = 이벤트 || _self.lableIndex = e.originalEvent.pageX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("touchmove", 함수(이벤트) { _self.HanderMove(이벤트, "모바일"); }); $(document).on("touchend", 함수(이벤트) { _self.HanderOut(); }); } //마우스/손가락이 슬라이딩 버튼을 터치합니다 Slider.prototype.HanderIn = 함수 () { var _self = this; _self.swipestart = true; _self.min = 0; _self.max = $("#slider").width(); } //마우스/손가락 밖으로 이동 Slider.prototype.HanderOut = 함수 () { var _self = this; //중지 _self.swipestart = false; _self.Move(); } //마우스/손가락 움직임 Slider.prototype.HanderMove = 함수(이벤트, 유형) { var _self = this; if (_self.swipestart) { event.preventDefault(); var 이벤트 = 이벤트 || If (유형 == "모바일") { _self.index = event.originalEvent.pageX - _self.lableIndex; } else { _self.index = event.clientX - _self.lableIndex; } _self.Move(); } } //마우스/손가락 밖으로 이동 Slider.prototype.Move = 함수 () { var _self = this; $(".warn").text("index:" _self.index ", max" _self.max ",lableIndex:" _self.lableIndex ",value:" $("#captcha").val() " 날짜 :" new Date().getUTCDate()); If ((_self.index 20) >= _self.max) { _self.index = _self.max - 20; } if (_self.index _self.index = _self.min; } $(".label").css("left", _self.index "px"); If (_self.index == (_self.max - 20)) { //그만 _self.swipestart = false; _self.IsOk = true;//잠금 해제 $("#captcha").val(1); var style = {"filter": "alpha(opacity=1)", "-moz-opacity": "1", "opacity": "1"} $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(스타일); $("#slider").css("배경색", "#E5EE9F"); $("#lableTip").text("감사합니다!"); } 그 밖의 { _self.IsOk = false;//未解锁 $("#captcha").val(0); var style = { "filter": "알파(불투명도=0.2)", "-moz-opacity": "0.2", "opacity": "0.2"} $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(스타일); $("#slider").css("배경색", "#FDEB9C"); $("#lableTip").text("슬라이드하여 내가 인간인지 확인하세요!"); } } 效果实现：