鼠标拖动box，点击“点击回放拖动轨迹”可以自动沿着你鼠标拖动的轨迹滑动
<!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>
<script src="fengz.js"></script>
<style>
html,
body {
overflow: hidden;
}
body,
div,
h2,
p {
margin: 0;
padding: 0;
}
body {
color: #fff;
background: #000;
font: 12px/2 Arial;
}
p {
padding: 0 10px;
margin-top: 10px;
}
span {
color: #ff0;
padding-left: 5px;
}
#box {
position: absolute;
width: 300px;
height: 150px;
background: #333;
border: 2px solid #ccc;
}
#box h2 {
height: 25px;
line-height: 25px;
cursor: move;
/*手型：移动*/
background: #222;
border-bottom: 2px solid #ccc;
text-align: right;
padding: 0 10px;
}
#box h2 a {
color: #fff;
font: 12px/25px Arial;
text-decoration: none;
outline: none;
}
</style>
</head>
<body>
<div id="box">
<h2><a id="btn" href="#">点击回放拖动轨迹</a></h2>
<p><strong>Drag:</strong><span>false</span></p>
<p><strong>offsetLeft:</strong><span>0</span></p>
<p><strong>offsetTop:</strong><span>0</span></p>
</div>
<script>
//获取相关元素
var h2 = getEle("h2")[0];
var btn = getEle("#btn");
var spanDrag = getEle("span")[0];
var spanLeft = getEle("span")[1];
var spanTop = getEle("span")[2];
var box = getEle("#box");
var arr = [];
spanDrag.innerHTML = "false";
//拖拽：按下 移动 擡起 事件
h2.onmousedown = function(evt) {
//点鼠标按下的时候获取光标的box中的位置
var ox = evt.offsetX;
var oy = evt.offsetY;
spanDrag.innerHTML = "true";
//记录的点（box的left和top），用对象记录
var obj = {};
obj.x = box.offsetLeft;
obj.y = box.offsetTop;
arr.unshift(obj);
//移动的过程中 记录 box 偏移量
document.onmousemove = function(e) {
var obj = {};
obj.x = e.clientX - ox;
obj.y = e.clientY - oy;
arr.unshift(obj);
box.style.left = e.clientX - ox + "px";
box.style.top = e.clientY - oy + "px";
spanLeft.innerHTML = e.clientX - ox;
spanTop.innerHTML = e.clientY - oy;
};
};
document.onmouseup = function() {
document.onmousemove = null;
spanDrag.innerHTML = "false";
};
//点击回放时，把存在数组中的座标点拿出来重新给box 的left 和top
btn.onclick = function() {
//点击时间；里面有定时器的时候，一定要先清除定时器
clearInterval(btn.timer);
//使用定时器不断去数组中取座标给box添加
var i = 0;
btn.timer = setInterval(function() {
box.style.left = arr[i].x + "px";
box.style.top = arr[i].y + "px";
spanLeft.innerHTML = arr[i].x;
spanTop.innerHTML = arr[i].y;
i++;
if (i >= arr.length) {
clearInterval(btn.timer);
arr = [];
}
}, 20);
};
</script>
</body>
</html>
案例效果图（由于没有屏录软件，就截个效果图）
