鼠標拖動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>
案例效果圖（由於沒有屏錄軟件，就截個效果圖）
