실현 효과: CSS 스타일 코드는 생략되었습니다. html 코드: jquery.mobile 및 jquery를 페이지로 가져옵니다. 코드 복사 코드는 다음과 같습니다. </script">http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script</a>><br> <script src="<a href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script">http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script</a>><br> </div> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="52904" class="copybut" id="copybut52904" onclick="doCopy('code52904')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code52904"> <br> <div id="pageSlide"><br> <input type="hidden" value="" id="captcha"/><br> <br> <div id="slider" class="slider"><br> ~ > <span id="lableTip">슬라이드하여 내가 인간인지 확인하세요!</span><br> ~ ~ <br><br> <br>js 코드: </div> <p></p> <p></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="30878" class="copybut" id="copybut30878" onclick="doCopy('code30878')"><u> 코드는 다음과 같습니다.</u><div class="codebody" id="code30878"> <br> <script type="text/javascript"><br> window.onload = 함수 () {<br> var Slider1 = 새 Slider();<br> 슬라이더1.Init();<br> ///화면 크기가 변경될 때 트리거<br> $(window).resize(function () {<br> 슬라이더1.HanderIn();<br> 슬라이더1.HanderOut();<br> });<br> }<br> //슬라이더 막대 객체<br> 기능 슬라이더(swipestart, min, max, index, IsOk, lableIndex) {<br> var _self = this;<br> //슬라이딩 시작 여부<br> _self.swipestart = swipestart;<br> //최소값<br> _self.min = min;<br> //최대값<br> _self.max = 최대;<br> //슬라이더의 현재 위치<br> _self.index = index;<br> //슬라이드 성공 여부<br> _self.IsOk = IsOk;<br> //마우스가 슬라이딩 버튼 위치에 있습니다<br> _self.lableIndex = lableIndex;<br> }<br> //초기화<br> Slider.prototype.Init = 함수 () {<br> var _self = this;<br> $("#label").on("mousedown", 함수(이벤트) {<br> var e = 이벤트 || _self.lableIndex = e.clientX - this.offsetLeft;<br> _self.HanderIn();<br> });<br> $("#pageSlide").on("mousemove", 함수(이벤트) {<br> _self.HanderMove(이벤트);<br> });<br> $(document).on("mouseup", 함수(이벤트) {<br> _self.HanderOut();<br> });<br> $("#label").on("touchstart", 기능(이벤트) {<br> var e = 이벤트 || _self.lableIndex = e.originalEvent.pageX - this.offsetLeft;<br> _self.HanderIn();<br> });<br> $("#pageSlide").on("touchmove", 함수(이벤트) {<br> _self.HanderMove(이벤트, "모바일");<br> });<br> $(document).on("touchend", 함수(이벤트) {<br> _self.HanderOut();<br> });<br> }<br> //마우스/손가락이 슬라이딩 버튼을 터치합니다<br> Slider.prototype.HanderIn = 함수 () {<br> var _self = this;<br> _self.swipestart = true;<br> _self.min = 0;<br> _self.max = $("#slider").width();<br> }<br> //마우스/손가락 밖으로 이동<br> Slider.prototype.HanderOut = 함수 () {<br> var _self = this;<br> //중지<br> _self.swipestart = false;<br> _self.Move();<br> }<br> //마우스/손가락 움직임<br> Slider.prototype.HanderMove = 함수(이벤트, 유형) {<br> var _self = this;<br> if (_self.swipestart) {<br> event.preventDefault();<br> var 이벤트 = 이벤트 || If (유형 == "모바일") {<br> _self.index = event.originalEvent.pageX - _self.lableIndex;<br> } else {<br> _self.index = event.clientX - _self.lableIndex;<br> }<br> _self.Move();<br> }<br> }<br> //마우스/손가락 밖으로 이동<br> Slider.prototype.Move = 함수 () {<br> var _self = this;<br> $(".warn").text("index:" _self.index ", max" _self.max ",lableIndex:" _self.lableIndex ",value:" $("#captcha").val() " 날짜 :" new Date().getUTCDate());<br> If ((_self.index 20) >= _self.max) {<br> _self.index = _self.max - 20;<br> }<br> if (_self.index < 0) {<br> _self.index = _self.min;<br> }<br> $(".label").css("left", _self.index "px");<br> If (_self.index == (_self.max - 20)) {<br> //그만<br> _self.swipestart = false;<br> _self.IsOk = true;//잠금 해제<br> $("#captcha").val(1);<br> var style = {"filter": "alpha(opacity=1)",<br> "-moz-opacity": "1", "opacity": "1"}<br> $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(스타일);<br> $("#slider").css("배경색", "#E5EE9F");<br> $("#lableTip").text("감사합니다!");<br> } 그 밖의 {<br> _self.IsOk = false;//未解锁<br> $("#captcha").val(0);<br> var style = { "filter": "알파(불투명도=0.2)",<br> "-moz-opacity": "0.2", "opacity": "0.2"}<br> $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(스타일);<br> $("#slider").css("배경색", "#FDEB9C");<br> $("#lableTip").text("슬라이드하여 내가 인간인지 확인하세요!");<br> }<br> }<br> <br> </div> <p>效果实现：</p> <p style="text-align: center"><img alt="" src="http://files.jb51.net/file_images/article/201412/201412310942574.jpg"></p></a></span> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
