JavaScript implementiert die Schiebe-Entriegelungsfunktion_Grundkenntnisse

Realisierungseffekt:

Der CSS-Stilcode wird weggelassen.

HTML-Code:

jquery.mobile und jquery

werden auf der Seite importiert

Code kopieren Der Code lautet wie folgt: 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"> >

Code kopieren Der Code lautet wie folgt:

& Lt; span id = "label" class = "label" & gt; & lt;/span & gt; Folie, um zu bestätigen, dass ich ein Mensch bin!

js-Code:

Code kopieren Der Code lautet wie folgt: window.onload = function () { var slider1 = new Slider(); slider1.Init(); ///Wird ausgelöst, wenn sich die Bildschirmgröße ändert $(window).resize(function () { slider1.HanderIn(); slider1.HanderOut(); }); } //Slider-Bar-Objekt function Slider(swipestart, min, max, index, IsOk, lableIndex) { var _self = this; //Ob ich anfangen soll zu rutschen _self.swipestart = swipestart; //Mindestwert _self.min = min; //Maximalwert _self.max = max; //Die aktuelle Position des Schiebereglers _self.index = index; //Ob die Folie erfolgreich war _self.IsOk = IsOk; //Die Maus befindet sich an der Position des Schiebeknopfes _self.lableIndex = lableIndex; } //Initialisierung Slider.prototype.Init = function () { var _self = this; $("#label").on("mousedown", Funktion (Ereignis) { var e = event || window.event; _self.lableIndex = e.clientX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("mousemove", Funktion (Ereignis) { _self.HanderMove(event); }); $(document).on("mouseup", Funktion (Ereignis) { _self.HanderOut(); }); $("#label").on("touchstart", Funktion (Ereignis) { var e = event || window.event; _self.lableIndex = e.originalEvent.pageX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("touchmove", Funktion (Ereignis) { _self.HanderMove(event, "mobile"); }); $(document).on("touchend", Funktion (Ereignis) { _self.HanderOut(); }); } //Maus/Finger berührt den Schiebeknopf Slider.prototype.HanderIn = function () { var _self = this; _self.swipestart = true; _self.min = 0; _self.max = $("#slider").width(); } //Maus/Finger bewegen sich nach außen Slider.prototype.HanderOut = function () { var _self = this; //Stopp _self.swipestart = false; _self.Move(); } //Maus-/Fingerbewegung Slider.prototype.HanderMove = Funktion (Ereignis, Typ) { var _self = this; if (_self.swipestart) { event.preventDefault(); var event = event || window.event; If (type == "mobile") { _self.index = event.originalEvent.pageX - _self.lableIndex; } sonst { _self.index = event.clientX - _self.lableIndex; } _self.Move(); } } //Maus/Finger bewegen sich nach außen Slider.prototype.Move = function () { var _self = this; $(".warn").text("index:" _self.index ", max" _self.max ",lableIndex:" _self.lableIndex ",value:" $("#captcha").val() " Datum :" 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)) { //Stopp _self.swipestart = false; _self.IsOk = true;//Unlock $("#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("background-color", "#E5EE9F"); $("#lableTip").text("Danke!"); } sonst { _self.IsOk = false;//未解锁 $("#captcha").val(0); var style = { "filter": "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("background-color", "#FDEB9C"); $("#lableTip").text("Schieben Sie, um zu bestätigen, dass ich ein Mensch bin!"); } } 效果实现：

JavaScript implementiert die Schiebe-Entriegelungsfunktion_Grundkenntnisse

In Verbindung stehende Artikel