通过js实现滑块验证（简略版）

目录

思路：

具体实现过程

整体代码

---

思路：

1.获取滑块的左位置 （使用offsetLeft ）。

2.通过onmousedown,onmousemove,onmouseup实现获取鼠标位置(使用clientX)。

3.通过鼠标获取到的位置和滑块原位置之间的偏差值赋予滑块位置实现滑块的运动。

4.判断滑块是否到达终点，若到达则固定位置，未到达则回到初始位置。

具体实现过程

1.body 内容

2.获取元素（dom对象）

3.js实现（*）

1.通过点击事件获取滑块最初的位置。

2.设置flag（用于判断滑块是否到达终点）。

3.使用onmousedown获取初始位置并且设置flag=1(意味着可以执行onmousemove)。

3.使用嵌套onmousemove获取鼠标位置，并且算出偏移量padding并赋予滑块实现滑块的移动

并且判断是否到达终点，若到达则固定位置。

4。当鼠标抬起即onmousemove 时候flag = 0（禁止使用onmousemove）然后判断是否到达终点如果未到达则恢复初始状态，即需要重新移动到终点。

 效果图：

 

整体代码