Kesan realisasi: Kod gaya css ditinggalkan. kod html: jquery.mobile dan jquery diimport pada halaman Salin kod Kod adalah seperti berikut: </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>Salin kod</u></a></span> Kod adalah seperti berikut:</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> & Lt; span id = "label" class = "label" & gt; & lt;/span & gt; <br> <span id="lableTip">Gelongsor untuk mengesahkan saya manusia!</span><br> <br><br> </div> kod js: <p></p> <p></p> <div class="codetitle"><span>Salin kod<a style="CURSOR: pointer" data="30878" class="copybut" id="copybut30878" onclick="doCopy('code30878')"><u></u> Kod adalah seperti berikut:</a><div class="codebody" id="code30878"> <br> <script type="text/javascript"><br> window.onload = fungsi () {<br> var slider1 = new Slider();<br> peluncur1.Init();<br> ///Dicetuskan apabila saiz skrin berubah<br> $(window).resize(function () {<br> peluncur1.HanderIn();<br> peluncur1.HanderOut();<br> });<br> }<br> //Objek bar gelangsar<br> fungsi Slider(swipestart, min, max, index, IsOk, lableIndex) {<br> var _self = ini;<br> //Sama ada hendak mula meluncur<br> _self.swipestart = swipestart;<br> //Nilai minimum<br> _self.min = min;<br> //Nilai maksimum<br> _self.maks = maks;<br> //Kedudukan semasa peluncur<br> _self.index = indeks;<br> //Sama ada slaid berjaya<br> _self.IsOk = IsOk;<br> //Tetikus berada pada kedudukan butang gelongsor<br> _self.lableIndex = lableIndex;<br> }<br> //Permulaan<br> Slider.prototype.Init = function () {<br> var _self = ini;<br> $("#label").on("mousedown", fungsi (acara) {<br> var e = peristiwa || _self.lableIndex = e.clientX - this.offsetLeft;<br> _self.HanderIn();<br> });<br> $("#pageSlide").on("mousemove", fungsi (acara) {<br> _self.HanderMove(acara);<br> });<br> $(document).on("mouseup", function (event) {<br> _self.HanderOut();<br> });<br> $("#label").on("touchstart", fungsi (acara) {<br> var e = peristiwa || _self.lableIndex = e.originalEvent.pageX - this.offsetLeft;<br> _self.HanderIn();<br> });<br> $("#pageSlide").on("touchmove", fungsi (acara) {<br> _self.HanderMove(acara, "mudah alih");<br> });<br> $(document).on("touchend", function (event) {<br> _self.HanderOut();<br> });<br> }<br> //Tetikus/jari menyentuh butang gelongsor<br> Slider.prototype.HanderIn = fungsi () {<br> var _self = ini;<br> _self.swipestart = benar;<br> _self.min = 0;<br> _self.max = $("#slider").width();<br> }<br> //Tetikus/jari dialih keluar<br> Slider.prototype.HanderOut = fungsi () {<br> var _self = ini;<br> //Berhenti<br> _self.swipestart = palsu;<br> _self.Move();<br> }<br> //Pergerakan tetikus/jari<br> Slider.prototype.HanderMove = fungsi (acara, jenis) {<br> var _self = ini;<br> jika (_self.swipestart) {<br> event.preventDefault();<br> var acara = peristiwa || Jika (taip == "mudah alih") {<br> _self.index = event.originalEvent.pageX - _self.lableIndex;<br> } lain {<br> _self.index = event.clientX - _self.lableIndex;<br> }<br> _self.Move();<br> }<br> }<br> //Tetikus/jari dialih keluar<br> Slider.prototype.Move = fungsi () {<br> var _self = ini;<br> $(".warn").text("index:" _self.index ", max" _self.max ",lableIndex:" _self.lableIndex ",value:" $("#captcha").val() " tarikh :" new Date().getUTCDate());<br> Jika ((_self.index 20) >= _self.max) {<br> _self.index = _self.max - 20;<br> }<br> Jika (_self.index < 0) {<br /> _self.index = _self.min;<br /> }<br /> $(".label").css("kiri", _self.index "px");<br /> Jika (_self.index == (_self.max - 20)) {<br /> //Berhenti<br /> _self.swipestart = palsu;<br /> _self.IsOk = true;//Buka kunci<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(style);<br /> $("#slider").css("warna latar belakang", "#E5EE9F");<br /> $("#lableTip").text("Terima Kasih!");<br /> } lain {<br /> _self.IsOk = false;//未解锁<br /> $("#captcha").val(0);<br /> gaya var = { "penapis": "alpha(opacity=0.2)",<br /> "-moz-opacity": "0.2", "opacity": "0.2"}<br /> $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);<br /> $("#slider").css("warna latar", "#FDEB9C");<br /> $("#lableTip").text("Slaid untuk mengesahkan saya manusia!");<br /> }<br /> }<br /> </skrip><br> </div> <p>效果实现：</p> <p style="text-align: center"><img alt="" src="http://files.jb51.net/file_images/article/201412/201412310942574.jpg"></p></span></div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
