实现效果： css样式代码略。 html代码： 页面上导入了jquery.mobile 、jquery 复制代码 代码如下: ">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">> 复制代码 代码如下: Slide to confirm I am human! js代码： 复制代码 代码如下: <br /> window.onload = function () {<br /> var slider1 = new Slider();<br /> slider1.Init();<br /> ///屏幕大小发生改变时触发<br /> $(window).resize(function () {<br /> slider1.HanderIn();<br /> slider1.HanderOut();<br /> });<br /> }<br /> //滑动条对象<br /> function Slider(swipestart, min, max, index, IsOk, lableIndex) {<br /> var _self = this;<br /> //是否开始滑动<br /> _self.swipestart = swipestart;<br /> //最小值<br /> _self.min = min;<br /> //最大值<br /> _self.max = max;<br /> //当前滑动条所处的位置<br /> _self.index = index;<br /> //是否滑动成功<br /> _self.IsOk = IsOk;<br /> //鼠标在滑动按钮的位置<br /> _self.lableIndex = lableIndex;<br /> }<br /> //初始化<br /> Slider.prototype.Init = function () {<br /> var _self = this;<br /> $("#label").on("mousedown", function (event) {<br /> var e = event || window.event;<br /> _self.lableIndex = e.clientX - this.offsetLeft;<br /> _self.HanderIn();<br /> });<br /> $("#pageSlide").on("mousemove", function (event) {<br /> _self.HanderMove(event);<br /> });<br /> $(document).on("mouseup", function (event) {<br /> _self.HanderOut();<br /> });<br /> $("#label").on("touchstart", function (event) {<br /> var e = event || window.event;<br /> _self.lableIndex = e.originalEvent.pageX - this.offsetLeft;<br /> _self.HanderIn();<br /> });<br /> $("#pageSlide").on("touchmove", function (event) {<br /> _self.HanderMove(event, "mobile");<br /> });<br /> $(document).on("touchend", function (event) {<br /> _self.HanderOut();<br /> });<br /> }<br /> //鼠标/手指接触滑动按钮<br /> Slider.prototype.HanderIn = function () {<br /> var _self = this;<br /> _self.swipestart = true;<br /> _self.min = 0;<br /> _self.max = $("#slider").width();<br /> }<br /> //鼠标/手指移出<br /> Slider.prototype.HanderOut = function () {<br /> var _self = this;<br /> //停止<br /> _self.swipestart = false;<br /> _self.Move();<br /> }<br /> //鼠标/手指移动<br /> Slider.prototype.HanderMove = function (event, type) {<br /> var _self = this;<br /> if (_self.swipestart) {<br /> event.preventDefault();<br /> var event = event || window.event;<br /> if (type == "mobile") {<br /> _self.index = event.originalEvent.pageX - _self.lableIndex;<br /> } else {<br /> _self.index = event.clientX - _self.lableIndex;<br /> }<br /> _self.Move();<br /> }<br /> }<br /> //鼠标/手指移出<br /> Slider.prototype.Move = function () {<br /> var _self = this;<br /> $(".warn").text("index:" + _self.index + "， max" + _self.max + ",lableIndex:" + _self.lableIndex + ",value:" + $("#captcha").val() + " date:" + new Date().getUTCDate());<br /> if ((_self.index + 20) >= _self.max) {<br /> _self.index = _self.max - 20;<br /> }<br /> if (_self.index < 0) {<br /> _self.index = _self.min;<br /> }<br /> $(".label").css("left", _self.index + "px");<br /> if (_self.index == (_self.max - 20)) {<br /> //停止<br /> _self.swipestart = false;<br /> _self.IsOk = true;//解锁<br /> $("#captcha").val(1);<br /> var style = {"filter": "alpha(opacity=1)",<br /> "-moz-opacity": "1", "opacity": "1"}<br /> $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);<br /> $("#slider").css("background-color", "#E5EE9F");<br /> $("#lableTip").text("Thank You!");<br /> } else {<br /> _self.IsOk = false;//未解锁<br /> $("#captcha").val(0);<br /> var style = { "filter": "alpha(opacity=0.2)",<br /> "-moz-opacity": "0.2", "opacity": "0.2"}<br /> $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);<br /> $("#slider").css("background-color", "#FDEB9C");<br /> $("#lableTip").text("Slide to confirm I am human!");<br /> }<br /> }<br /> 效果实现：
