Implementation effect:
CSS style code slightly.
HTML code:
Jquery.mobile, jquery is imported on the page
Copy Code code 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 Code code 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 Code code as follows:
<script type= "Text/javascript" >
Window.onload = function () {
var slider1 = new Slider ();
Slider1. Init ();
Trigger when screen size changes
$ (window). Resize (function () {
Slider1. Handerin ();
Slider1. Handerout ();
});
}
Slide Bar 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 slide bar
_self.index = index;
Whether to slide successfully
_self. IsOk = IsOk;
The position of the mouse in the sliding button
_self.lableindex = Lableindex;
}
Class
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 touch sliding button
Slider.prototype.HanderIn = function () {
var _self = this;
_self.swipestart = true;
_self.min = 0;
_self.max = $ ("#slider"). width ();
}
Mouse/finger Move out
Slider.prototype.HanderOut = function () {
var _self = this;
Stop it
_self.swipestart = false;
_self. Move ();
}
Mouse/Finger Movement
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 Move out
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 +) >= _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 it
_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;//Not 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: