这篇文章主要为大家详细介绍了视图(视图)实现滑动验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用视图(视图)实现滑动验证码，鼠标点击滑动验证，验证成功之后会显示验证通过。
程序分析
1 .{ 1 }鼠标的点击
2 ._滑块的拖动
{ 1 }未验证之前滑动条上显示的文字
4 ."滑块箭头指向视图(视图)函数
5判断是否拖动完毕
6 ._拖动完毕时改变背景色并显示验证成功
效果图演示
原始状态
点击之后拖动
拖动完毕
有没有感觉很奇妙的呢？？？美元
在欣赏代码之前准备工作要做好的！
* *010-5900 * *相关架包的引入（三个架包)
src=' js/view。js '/脚本脚本
src=' 339 unpkg。com/element-ui/lib/index。js '/脚本脚本
src='js/jquery.js'/script脚本
代码演示
！文档类型html
超文本标记语言格式
头儿
meta charset='UTF-8 '
标题/标题
src=' js/view。js '/脚本脚本
src=' 339 unpkg。com/element-ui/lib/index。js '/脚本脚本
src='js/jquery.js'/script脚本
样式(风格)。大[
边界半径：30px
位置：相对；
背景色：# 75 CDF 9；
宽度：300像素
高度：34像素
左边距：30像素
上边距：100像素
线路高度：34像素
文字对齐：中心；
}。手[
边界半径：30px
位置：绝对；
顶部：0像素
左：0像素
宽度：40px
高度：32像素
边界：1px固体#ccc
光标：移动；
}。处理程序[
背景：# fff URL(' data:image/png)；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
}。处理程序完成[
背景：# fff URL(' data:image/png)；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
}。BG[
边界半径：30px
背景色：# 13ce 66
高度：34像素
宽度：0像素
}。文本[
位置：绝对；
顶部：0像素
宽度：300像素
蚊子用户选择：无：
-网络工具包用户选择：无；
用户选择：无：
表示“具有…性质的”用户选择：无：
-ms-用户-选择：无：
}
/风格
/头
体表
div id='应用程序'
div class='大'
差异类='bg'/div
差异类=' text“{ confirm words } }/div
div @ mousedown=' mousewnfn($ event)' class=' hand handler '/div
/div
/div
/body
脚本编写
var vm=新视图
<应用程序名称>:#app，
名称：""
组件：{},
道具：{}，
日期()
返回
beginClientX: 0，
摩门教徒：假的，
maxwidth: 258，
确认字： '拖动滑块验证-是啊
/*滑块文字*/
确认成功：假，/*是否成功*/
}
},
已创建(){}，
观察：>
},
方法：>
mousedownfn:函数
这个。mousemovestata=true
这个。beginclientx=e . clientx
},
//按下滑块
成功函数()
$(')。手)。removeClass('handler ').添加类(“处理程序完成”)；
this.confirmWords='验证通过'我不知道
$(')。"大"。CSS({ 0 })
颜色：#fff
});
$(')。"大"。CSS({ 0 })
背景色：13CE66
});
$(')。手)。CSS({ 0 })
' left': this.maxwidth
});
$(')。bg。)。CSS({ 0 })
' width': this.maxwidth
});
$('body ').unbind(" mousemove ")；
$('body ').取消订阅(mouseup)；
这。确认成功=真
} //判断是否成功
},
已挂载()
$('body ').on('mousemove '，(e)=& gt
//拖动使用箭头指向视图(视图)函数
如果(这个。mousemvested)>
var width=e .客户端x-this。开始客户端x；
如果(width 0 width=this.maxwidth)>
$(')。手)。CSS({ 0 })
左：宽度
});
$(')。bg。)。CSS({ 0 })
宽度：宽度
});
} else if(宽度this。最大宽度)}
这个。成功函数()；
}
}
});
$('body ').on('mouseup '，(e)=& gt
//鼠标放开
这个。mousemovestata=false
var width=e .客户端x-this。开始客户端x；
如果(宽度这个。最大宽度)}
$(')。手)。CSS({ 0 })
左：0
});
$(')。bg。)。CSS({ 0 })
“宽度”:0
});
}
})
}
});
/脚本
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。