1.css
<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;top:50%;left:50%;margin:-75px 0 0 -150px;}
#box h2{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>
2.html
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
<h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
</div>
3.js
<script>
var oBox = document.getElementById("box");
var oH2 = oBox.children[0];
var pointArray = [];
oH2.onmousedown = function(event){
var e = event || window.event;
var offsetX = e.offsetX;
var offsetY = e.offsetY;
//纪录移动位置
pointArray.push({
x:oBox.offsetLeft,
y:oBox.offsetTop
})
//拖拽进行
document.onmousemove = function(event){
var e = event || window.event;
var clientX = e.clientX;
var clientY = e.clientY;
oBox.style.left = clientX - offsetX + "px";
oBox.style.top = clientY - offsetY + "px";
var point = {
x:clientX - offsetX,
y:clientY - offsetY
}
pointArray.push(point);
}
}
oBox.onmouseup = function(){
document.onmousemove = null;
}
var oA = oH2.children[0];
var timer = null;
oA.onclick = function(){
var i = pointArray.length;
timer = setInterval(function(){
i --;
oBox.style.left = pointArray[i].x + "px";
oBox.style.top = pointArray[i].y + "px";
if(i == 0){
clearInterval(timer);
pointArray.length = 0;
}
},50)
}
</script>
本文介绍了一种使用CSS和JavaScript实现元素拖拽功能的方法,并通过记录拖拽轨迹实现轨迹回放功能。文章详细展示了如何利用HTML、CSS定位属性以及JavaScript的鼠标事件监听来完成这一过程。
1857

被折叠的 条评论
为什么被折叠?



