<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
padding: 0%;
margin: 0%;
}
body{
background: #006b9d;
}
#verify{
background: url(bg.png);
width: 508px;
height: 532px;
margin: 50px auto; /*上下边距为50px,左右边距自动形成,形成水平方向的居中显示*/
position: relative;
}
#drag{
width: 171px;
height: 140px;
position: absolute;
/*top为185px,left为156时重合*/
top: 185px;
left: 0px;
background: url(drag.png);
}
#dot{
width: 29px;
height: 29px;
background: url(dot.png);
position: absolute;
top: 460px;
left: 70px;
}
#success{
position: absolute;
font-size: 32px;
top: 130px;
right: 0px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
columns: #fff;
background: #C33;
padding: 5px 20px;
/*隐藏,拖拽成功时才出现*/
display: none;
}
</style>
</head>
<body>
<div id="verify">
<div id="drag"></div>
<div id="dot"></div>
<p id="success">Success!</p>
</div>
<script type="text/javascript">
var max = 350; //设置最大可拖动的滑块的范围,等于滑块区域的宽度减去图片自身的宽度
var final = 156; //设置拼图相对于div的正确位置的坐标
var buffer = 7;
var drag = document.getElementById("drag");
var dot = document.getElementById("dot");
var success = document.getElementById("success");
var dotStart = dot.offsetLeft; //获取点的起始坐标
var dragStart = drag.offsetLeft;//获取滑块拼图的起始坐标
drag.style.left = -Math.random()* 200+drag.offsetLeft+"px";
dot.onmousedown = function(e){
var startX = e.clientX;//按下时鼠标的指针x坐标
/*dotLeft与dotStart不同,dotLeft有可能是第二次或某一次按下时的坐标,和dotStart的坐标不同,每次刷新界面时,dotStart都会重置为初始值*/
var dotLeft = dot.offsetLeft;
document.οnmοusemοve=function(e){
/*由dot的移动的距离to来改变dot自身和drag的位置*/
var move = e.clientX - startX;
var to = move + dotStart; //目的坐标值
/*如果目标的位置大于最右侧的位置就停留在最右侧,如果dot的位置小于其实坐标,就停留在最左侧
max为进度条的长度
*/
if(to > dotStart+max){
to = dotStart+max;
}else if(to < dotStart){
to = dotStart;
}
dot.style.left = to +"px";
drag.style.left = (dragStart+(to-dotStart))+"px";
}
document.onmouseup = function(e){
/*不要忘记对之前事件的监听*/
this.onmousemove = null;
if(Math.abs(drag.offsetLeft-final) < buffer){
console.log(drag.offsetLeft);//157,
//offsetLeft 和 offsetTop 返回的是相对于 offsetParent 元素的距离,而 offsetParent 指的是一个元素最近的父级定位元素,如果没有定位元素就是文档根节点。
success.style.display = "block";
}else{
success.style.display = "none";
}
}
}
</script>
</body>
</html>