JavaScript melaksanakan fungsi buka kunci gelongsor_Pengetahuan asas

Kesan realisasi:

Kod gaya css ditinggalkan.

kod html:

jquery.mobile dan jquery

diimport pada halaman

Salin kod Kod adalah seperti berikut: 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"> >

Salin kod Kod adalah seperti berikut:

& Lt; span id = "label" class = "label" & gt; & lt;/span & gt; Gelongsor untuk mengesahkan saya manusia!

kod js:

Salin kod Kod adalah seperti berikut: window.onload = fungsi () { var slider1 = new Slider(); peluncur1.Init(); ///Dicetuskan apabila saiz skrin berubah $(window).resize(function () { peluncur1.HanderIn(); peluncur1.HanderOut(); }); } //Objek bar gelangsar fungsi Slider(swipestart, min, max, index, IsOk, lableIndex) { var _self = ini; //Sama ada hendak mula meluncur _self.swipestart = swipestart; //Nilai minimum _self.min = min; //Nilai maksimum _self.maks = maks; //Kedudukan semasa peluncur _self.index = indeks; //Sama ada slaid berjaya _self.IsOk = IsOk; //Tetikus berada pada kedudukan butang gelongsor _self.lableIndex = lableIndex; } //Permulaan Slider.prototype.Init = function () { var _self = ini; $("#label").on("mousedown", fungsi (acara) { var e = peristiwa || _self.lableIndex = e.clientX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("mousemove", fungsi (acara) { _self.HanderMove(acara); }); $(document).on("mouseup", function (event) { _self.HanderOut(); }); $("#label").on("touchstart", fungsi (acara) { var e = peristiwa || _self.lableIndex = e.originalEvent.pageX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("touchmove", fungsi (acara) { _self.HanderMove(acara, "mudah alih"); }); $(document).on("touchend", function (event) { _self.HanderOut(); }); } //Tetikus/jari menyentuh butang gelongsor Slider.prototype.HanderIn = fungsi () { var _self = ini; _self.swipestart = benar; _self.min = 0; _self.max = $("#slider").width(); } //Tetikus/jari dialih keluar Slider.prototype.HanderOut = fungsi () { var _self = ini; //Berhenti _self.swipestart = palsu; _self.Move(); } //Pergerakan tetikus/jari Slider.prototype.HanderMove = fungsi (acara, jenis) { var _self = ini; jika (_self.swipestart) { event.preventDefault(); var acara = peristiwa || Jika (taip == "mudah alih") { _self.index = event.originalEvent.pageX - _self.lableIndex; } lain { _self.index = event.clientX - _self.lableIndex; } _self.Move(); } } //Tetikus/jari dialih keluar Slider.prototype.Move = fungsi () { var _self = ini; $(".warn").text("index:" _self.index ", max" _self.max ",lableIndex:" _self.lableIndex ",value:" $("#captcha").val() " tarikh :" new Date().getUTCDate()); Jika ((_self.index 20) >= _self.max) { _self.index = _self.max - 20; } Jika (_self.index _self.index = _self.min; } $(".label").css("kiri", _self.index "px"); Jika (_self.index == (_self.max - 20)) { //Berhenti _self.swipestart = palsu; _self.IsOk = true;//Buka kunci $("#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(style); $("#slider").css("warna latar belakang", "#E5EE9F"); $("#lableTip").text("Terima Kasih!"); } lain { _self.IsOk = false;//未解锁 $("#captcha").val(0); gaya var = { "penapis": "alpha(opacity=0.2)", "-moz-opacity": "0.2", "opacity": "0.2"} $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style); $("#slider").css("warna latar", "#FDEB9C"); $("#lableTip").text("Slaid untuk mengesahkan saya manusia!"); } } 效果实现：