JavaScript implémente la fonction de déverrouillage coulissant_Connaissances de base

Effet de réalisation :

Le code de style CSS est omis.

code html :

jquery.mobile et jquery

sont importés sur la page

Copier le code Le code est le suivant : 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"> >

Copier le code Le code est le suivant :

Faites glisser pour confirmer que je suis humain !

code js :

Copier le code Le code est le suivant : window.onload = function () { var slider1 = new Slider(); slider1.Init(); ///Déclenché lorsque la taille de l'écran change $(window).resize(function () { slider1.HanderIn(); slider1.HanderOut(); }); > //Objet barre de défilement function Slider(swipestart, min, max, index, IsOk, lableIndex) { var _self = this; //S'il faut commencer à glisser _self.swipestart = swipestart; //Valeur minimale _self.min = min; //Valeur maximale _self.max = max; //La position actuelle du curseur _self.index = index; //Si la diapositive a réussi _self.IsOk = IsOk; //La souris est à la position du bouton coulissant _self.lableIndex = lableIndex; > //Initialisation Slider.prototype.Init = function () { var _self = this; $("#label").on("mousedown", fonction (événement) { var e = événement || _self.lableIndex = e.clientX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("mousemove", function (événement) { _self.HanderMove(event); }); $(document).on("mouseup", fonction (événement) { _self.HanderOut(); }); $("#label").on("touchstart", fonction (événement) { var e = événement || _self.lableIndex = e.originalEvent.pageX - this.offsetLeft; _self.HanderIn(); }); $("#pageSlide").on("touchmove", fonction (événement) { _self.HanderMove(event, "mobile"); }); $(document).on("touchend", fonction (événement) { _self.HanderOut(); }); > //Souris/doigt touche le bouton coulissant Slider.prototype.HanderIn = function () { var _self = this; _self.swipestart = true; _self.min = 0; _self.max = $("#slider").width(); > //La souris/le doigt sortent Slider.prototype.HanderOut = fonction () { var _self = this; //Arrêter _self.swipestart = false; _self.Move(); > //Mouvement de la souris/des doigts Slider.prototype.HanderMove = fonction (événement, type) { var _self = this; if (_self.swipestart) { event.preventDefault(); var event = event || Si (tapez == "mobile") { _self.index = event.originalEvent.pageX - _self.lableIndex; } autre { _self.index = event.clientX - _self.lableIndex; } _self.Move(); } > //La souris/le doigt sortent Slider.prototype.Move = function () { var _self = this; $(".warn").text("index:" _self.index ", max" _self.max ",lableIndex:" _self.lableIndex ",value:" $("#captcha").val() " date :" new Date().getUTCDate()); Si ((_self.index 20) >= _self.max) { _self.index = _self.max - 20; } if (_self.index _self.index = _self.min; } $(".label").css("left", _self.index "px"); Si (_self.index == (_self.max - 20)) { //Arrêtez _self.swipestart = false; _self.IsOk = true;//Unlock $("#captcha").val(1); var style = {"filter": "alpha(opacity=1)", "-moz-opacity": "1", "opacité": "1"} $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style); $("#slider").css("background-color", "#E5EE9F"); $("#lableTip").text("Merci !"); } autre { _self.IsOk = false;//未解锁 $("#captcha").val(0); var style = { "filter": "alpha(opacity=0.2)", "-moz-opacity": "0.2", "opacité": "0.2"} $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style); $("#slider").css("background-color", "#FDEB9C"); $("#lableTip").text("Faites glisser pour confirmer que je suis humain!"); > > 效果实现：

JavaScript implémente la fonction de déverrouillage coulissant_Connaissances de base

Articles Liés