<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 300px; height: 40px; line-height: 40px; background-color: #e8e8e8; position: relative; margin: 0 auto; text-align: center; } .bg { width: 0px; height: 100%; position: absolute; left: 0; top: 0; background-color: #75CDF9; } .btn { width: 40px; height: 38px; position: absolute; left: 0; top: 0; border: 1px solid #ccc; cursor: move; font-family: "宋体"; text-align: center; background-color: #fff; -webkit-user-select: none; -moz-user-select: none; color: #666; z-index: 10; } .bg span { display: none; } </style> </head> <body> <div class="box"> 请拖动滑块解锁 <div class="bg" id="bg"> <span>验证成功</span> </div> <div class="btn" id="btn">>></div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function() { //获取元素 var oBox = document.querySelector(".box"); var oBg = document.getElementById("bg"); var oBtn = document.getElementById("btn"); var oSpan = document.querySelector(".bg span"); console.log(oBtn.innerHTML); var bgWidth = oBox.offsetWidth - oBtn.offsetWidth; console.log(bgWidth); //绑定事件 oBtn.onmousedown = function(e) { var left = this.offsetLeft; //0 //起点--鼠标相对于浏览器的位置 var originX = e.clientX; oBtn.onmousemove = function(e) { var Left = parseInt(oBtn.style.left); console.log(Left); if(oBtn.style.left == bgWidth + 'px') { oBg.style.background = "forestgreen"; oSpan.style.display = "block"; oBtn.innerHTML = '<div class="btn" id="btn">√</div>'; oBtn.style.border = "0" return false; oBtn.style.left = bgWidth + "px"; } if(Left < 0 || Left >= bgWidth) { return false; } //终点 var endX = e.clientX; //移动的距离 var distanceX = endX - originX; oBtn.style.left = (left + distanceX) + "px"; //改变bg oBg.style.width = (left + distanceX) + "px"; } } //移除move事件 document.onmouseup = function() { oBtn.onmousemove = null; console.log(oBtn.style.left); if(oBtn.style.left != bgWidth + 'px') { oBtn.style.left = 0 + "px"; oBg.style.width = 0 + "px"; } } } </script> </body> </html>