效果展示：
代码：
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./index.js"></script><style>.box {position: relative;width: 300px;height: 30px;background-color: #dfdfdf;}.btn {position: absolute;width: 29px;height: 28px;text-align: center;line-height: 28px;background-color: white;border: 1px solid #bdbdbd;font-size: 13px;color: #bdbdbd;z-index: 3;}.text {position: absolute;width: 100%;margin-top: 7px;text-align: center;font-size: 10px;z-index: 2;}.bg {position: absolute;top: 0;height: 100%;background-color: #7ac23c;z-index: 1;}</style></head><body><div class="box"><!-- 滑块 --><div class="btn">>></div><!-- 文字 --><p class="text">请向右滑动滑块</p><!-- 背景 --><div class="bg"></div></div></body></html>
index.js
window.onload = function () {//选择器的封装function $(name) {//函数声明return document.querySelector(name);}var btn = $(".btn"); //按钮var box = $(".box"); //盒子var text = $(".text"); //文字var bg = $(".bg"); //背景var flag = false; //验证失败//鼠标按下//event对象 事件的状态btn.onmousedown = function (event) {var e = event || window.event;var downX = e.clientX; //按下与x轴的点//移动btn.onmousemove = function (event) {var moveX = event.clientX - downX; //移入距离-按下距离//移动范围if (moveX > 0) {this.style.left = moveX + "px";bg.style.width = moveX + "px";//验证成功if (moveX >= box.offsetWidth - this.offsetWidth) {flag = true; //验证成功text.innerHTML = "验证成功";text.style.color = "#fff";btn.onmousemove = null; //清除事件btn.onmousedown = null; //清除事件}}};//松开btn.onmouseup = function () {btn.onmousemove = null; //清除事件//判断条件if (flag) return;this.style.left = 0;bg.style.width = 0;};};};
