Javascript enables slide unlocking and javascript slide unlocking

Javascript enables slide unlocking and javascript slide unlocking

Effect:

The css style code is omitted.

Html code:

Jquery. mobile and jquery are imported on the page.

Copy codeThe Code is as follows:
<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>

Copy codeThe Code is as follows:
<Div id = "pageSlide">
<Input type = "hidden" value = "" id = "captcha"/>
 
<Div id = "slider" class = "slider">
<Span id = "label" class = "label"> </span>
<Span id = "lableTip"> Slide to confirm I am human! </Span>
</Div>
</Div>

Js Code:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Window. onload = function (){
Var slider1 = new Slider ();
Slider1.Init ();
/// Triggered when the screen size changes
$ (Window). resize (function (){
Slider1.HanderIn ();
Slider1.HanderOut ();
});
}
// Slide object
Function Slider (swipestart, min, max, index, IsOk, lableIndex ){
Var _ self = this;
// Whether to start sliding
_ Self. swipestart = swipestart;
// Minimum value
_ Self. min = min;
// Maximum value
_ Self. max = max;
// The position of the current Slider
_ Self. index = index;
// Whether the slide is successful
_ Self. IsOk = IsOk;
// Place the cursor at the sliding button
_ Self. lableIndex = lableIndex;
}
// Initialization
Slider. prototype. Init = function (){
Var _ self = this;
$ ("# Label"). on ("mousedown", function (event ){
Var e = event | window. event;
_ Self. lableIndex = e. clientX-this. offsetLeft;
_ Self. HanderIn ();
});
$ ("# PageSlide"). on ("mousemove", function (event ){
_ Self. HanderMove (event );
});
$ (Document). on ("mouseup", function (event ){
_ Self. HanderOut ();
});
$ ("# Label"). on ("touchstart", function (event ){
Var e = event | window. event;
_ Self. lableIndex = e. originalEvent. pageX-this. offsetLeft;
_ Self. HanderIn ();
});
$ ("# PageSlide"). on ("touchmove", function (event ){
_ Self. HanderMove (event, "mobile ");
});
$ (Document). on ("touchend", function (event ){
_ Self. HanderOut ();
});
}
// Mouse/Finger Contact sliding button
Slider. prototype. HanderIn = function (){
Var _ self = this;
_ Self. swipestart = true;
_ Self. min = 0;
_ Self. max = $ ("# slider"). width ();
}
// Mouse/finger Removal
Slider. prototype. HanderOut = function (){
Var _ self = this;
// Stop
_ Self. swipestart = false;
_ Self. Move ();
}
// Move the mouse/finger
Slider. prototype. HanderMove = function (event, type ){
Var _ self = this;
If (_ self. swipestart ){
Event. preventDefault ();
Var event = event | window. event;
If (type = "mobile "){
_ Self. index = event. originalEvent. pageX-_ self. lableIndex;
} Else {
_ Self. index = event. clientX-_ self. lableIndex;
}
_ Self. Move ();
}
}
// Mouse/finger Removal
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 ());
If (_ self. index + 20)> = _ self. max ){
_ Self. index = _ self. max-20;
}
If (_ self. index <0 ){
_ Self. index = _ self. min;
}
$ (". Label" ).css ("left", _ self. index + "px ");
If (_ self. index = (_ self. max-20 )){
// Stop
_ 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 ("Thank You! ");
} Else {
_ Self. IsOk = false; // unlocked
$ ("# 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 ("Slide to confirm I am human! ");
}
}
</Script>

Effect implementation: