javascript实现滑动解锁功能

实现效果：

钢性铸铁样式代码略。

超文本标记语言代码：

页面上导入了jquery.mobile、jquery

复制代码代码如下：脚本src=' http :http://apps。bdimg。com/libs/jquery/1。10 .2/jquery。量滴js '/script script src=' http :http://apps。bdimg。com/libs/jquery mobile/1。4 .2/jquery。移动电话。量滴js '/脚本

复制代码代码如下：div id='pageSlide '输入类型='隐藏'值=' id=' captcha '/div id=' slider ' class=' slider ' span id=' label ' class=' label '/span id=' label etip '滑动确认我是人类！/span /div /div

射流研究…代码：

复制代码代码如下：脚本类型=' text/JavaScript '窗口。onload=function(){ var Slider 1=new Slider()；幻灯片1。init()；///屏幕大小发生改变时触发$(窗口)。resize(function () { slider1 .林汉德()；幻灯片1。HanderOut()；});} //滑动条对象函数滑块(swipestart、min、max、index、IsOk、lableIndex){ var _ self=this；//是否开始滑动_ self.swipestart=swipestart//最小值_ self.min=min//最大值_ self.max=max//当前滑动条所处的位置_ self.index=index//是否滑动成功_self .IsOk=IsOk//鼠标在滑动按钮的位置_self。标签索引=标签索引；} //初始化滑块。原型。init=function(){ var _ self=this；$(“# label”).on('mousedown '，function(event){ var e=event | | window。事件；_ self。客户端x-这个。offsetleft_self .林汉德()；});$('#pageSlide ').on('mousemove '，函数(事件){ _self .HanderMove(事件);});$(文档)。on('mouseup '，函数(事件){ _self .HanderOut()；});$(“# label”).on('touchstart '，function(event){ var e=event | | window。事件；_ self。lableindex=e . originalevent。第x页这个。offsetleft_self .林汉德()；});$('#pageSlide ').on('touchmove '，函数(事件){ _self .HanderMove(事件、‘移动’)；});$(文档)。on('touchend '，函数(事件){ _self .HanderOut()；});} //鼠标/手指接触滑动按钮滑块。原型。林汉德=函数(){ var _ self=this_ self.swipestart=true_ self。最小值=0；_self.max=$('#slider ').宽度();} //鼠标/手指移出滑块。原型。handRout=function(){ var _ self=this；//停止_ self.swipestart=false_self .move()；} //鼠标/手指移动滑块。原型。handermove=function(event，type){ var _ self=this；if(_ self。swipestart){ event。prevent default()；var event=event | | window . event if(type==' mobile '){ _ self。索引=事件。原创。pagex-_ self。labeindex} else { _ self。索引=事件。客户端x-_ self。lableindex} _self .move()；} } //鼠标/手指移出滑块。原型。move=function(){ var _ self=this；$('.警告').文本(' index:' _self.index '，max' _self.max '，标签索引：' _self。标签索引，value:' $('#captcha ').val()"日期： "新日期()。getutchdate())；if((_ self。索引20)=_ self。max){ _ self。索引=_ self。max-20；} if(_ self。索引0){ _ self。索引=_ self。分钟；} $('.标签')。css('left '，_ self。索引“px”)；if(_ self。index==(_ self。max-20)){//停止_ self.swipestart=false_self .IsOk=真；//解锁$(' #验证码').val(1)；var style={'filter': 'alpha(不透明度=1 ')，'-moz-不透明度' : '1 ','不透明度' : '1'} $('。ui-BTN。用户界面-输入-BTN。ui-corner-all。ui-shadow’).css(样式);$(' #滑块').css(“”背景色，' # E5EE9F ')；$(' # LABELETIP ').文字('谢谢!');} else { _self .IsOk=假；//未解锁$(' #验证码').val(0)；var style={ 'filter': 'alpha(不透明度=0.2)'，'-moz-不透明度' : '0.2 '，'不透明度' : '0.2'} $(' .ui-BTN。用户界面-输入-BTN。ui-corner-all。ui-shadow’).css(样式);$(' #滑块').css(“”背景色，' # FDEB9C ')；$(' # LABELETIP ').文字('滑动确认我是人类!');} }/脚本

效果实现：