JS implementation of sliding unlock function (Pc+moblie)

Implementation results:

CSS style code slightly.

HTML code:

Jquery.mobile, jquery was imported on the page

12	<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

+ View Code

JS Code:

  1/** 2 * Created by Administrator on 15-1-9.  3 */4//Sliding Bar object 5 function Slider (Swipestart, Min, max, index, IsOk, Lableindex) {6 var _self = this;  7//Whether to start sliding 8 _self.swipestart = Swipestart; 9//min. _self.min = min; 11//Max _self.max = max; 13//Position of the current slider at _self.index = index; 15//whether sliding successfully _self. IsOk = IsOk; 17//mouse in the position of the sliding button _self.lableindex = Lableindex;      19} 20 21//Initialize Slider.prototype.Init = function () {document.getElementById ("btnsubmit"). Disabled = true; 24 var _self = this; $ ("#label"). On ("MouseDown", function (event) {$ var e = Event | | window.event; _self.lableinde x = E.clientx-this.offsetleft; _self. Handerin (); 29}); $ ("#pageSlide"). On ("MouseMove", function (event) {_self. Handermove (event); 33}); $ (document). On ("MouseUp", function (event) {_self. Handerout (); 37}); 38 39 40 $ ("#label"). On ("Touchstart", function (event) {$ try {$ var e = Event | | window.event; 43 Event.originalevent.changedtouches[0].clientx//event.originalevent.pagex _self.lableindex = Event.orig Inalevent.changedtouches[0].clientx-this.offsetleft; _self. Handerin (); Console.log} catch (e) {navigator.appversion + "does not support TouchEvent events! "+ e.message); 48} 49}); $ ("#pageSlide"). On ("Touchmove", function (event) {_self. Handermove (event, "mobile"); Console.log} catch (e) {navigator.appversion + "does not support Touchmove events! "+ e.message); 56} 57 58}); $ (document). On ("Touchend", function (event) {_self try {. Handerout (); The "Console.log" catch (E) {"Navigator.appversion +" does not support Touchend events! "+ e.message); 65} 66 67}); 68} 69 70//mouse/Finger touch slide button SLider.prototype.HanderIn = function () {_self var = this; _self.swipestart = true; _self.min = 0; 75 _self.max = $ ("#slider"). width (); if (_self.lableindex<0) {_self.lableindex=0;} 77} 78 79//mouse/finger removed Slider.prototype.HanderOut = function () { Bayi var _self = this; 82//Stop _self.swipestart = false; _self. Move (); 85} 86 87//mouse/finger Move Slider.prototype.HanderMove = function (event, type) {_self var = this; Swipestart) {event.preventdefault (); var event = Event | | window.event; if (type = = "Mob Ile ") {94//event.originalevent.changedtouches[0].clientx//event.originalevent.pagex _self.in Dex = Event.originalevent.changedtouches[0].clientx-_self.lableindex; _self.index} else {event.clientx-_self.lableindex; 98} _self. Move (); 100}101}102 103//mouse/finger out 104 Slider.prototype.Move = function() {_self var = this;106//$ (". Warn"). Text ("index:" + _self.index + ", max" + _self.max + ", Lableindex:" + _se Lf.lableindex + ", Value:" + $ ("#captcha"). Val () + "Date:" + new Date (). getUTCDate ()), 107//$ (". Warn"). Text ("Max:" + _s         Elf.max + ", index:" +_self.index + ", Lableindex:" +_self.lableindex "; 108 if ((_self.index +) >= _self.max) {109     _self.index = _self.max-20;110}111 if (_self.index < 0) {113 _self.index = _self.min;114         }115 $ (". Label"). CSS ("left", _self.index + "px"), if (_self.index = = (_self.max-20)) {117//Stop 118 _self.swipestart = false;119 _self.             IsOk = true;//Unlock $ ("#captcha"). Val (1); 121 122 var style = {"Filter": "Alpha (Opacity=1)", 123         "-moz-opacity": "1", "opacity": "1"}124 $ (". Ui-btn.ui-input-btn.ui-corner-all.ui-shadow"). CSS (style); 125 126 $ ("#slider"). CSS ("Background-color", "#E5EE9F"), 127 $ ("#lableTip"). Text ("Thank you!"); document.getElementById ("btnsubmit"). Disabled = false;129 document.getElementById ("Btnsubmit"). Parent Node.classList.remove ("ui-state-disabled"); n} else {131 _self.             IsOk = false;//Not unlocked $ ("#captcha"). Val (0); 133 var style = {"Filter": "Alpha (opacity=0.2)", 134         "-moz-opacity": "0.2", "opacity": "0.2"}135 $ (". Ui-btn.ui-input-btn.ui-corner-all.ui-shadow"). CSS (style); 136 $ ("#slider"). CSS ("Background-color", "#FDEB9C"), 137 $ ("#lableTip"). Text ("Slide to confirm I am human!"); 138 document.getElementById ("btnsubmit"). Disabled = true;139-document.getElementById ("btnsubmit"). Pare NtNode.classList.add ("ui-state-disabled"); 141 142}143}

1	效果实现：<br><br>

JS implementation of sliding unlock function (Pc+moblie)