您的位置：首页 > Web前端 > JavaScript

javascript实现窗口随着鼠标移动且移动路径重现

2016-09-22 22:41 477 查看
现在实现一个挺有趣的示例，页面中出现一个窗口，鼠标在窗口指定位置区域内按下拖动，窗口会随着鼠标一起移动，松开鼠标，停止移动，点击“轨迹重现”，窗口会自动走一遍移动路径。请看代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin:0; padding:0;}
.box {
width:300px;
height:300px;
background-color:gold;
position:absolute;
}
#p {
width:100%;
font:bold 20px/40px "宋体";
text-align:center;
background-color:#f00;
cursor:move;
}
</style>
</head>
<body>
<div class="box" id="box">
<p id="p">拖拽区域</p>
<a href="javascript:;" id="returning">轨迹重现</a>
</div>
<script>
/*
思路：
第一步：当页面加载完后，获取所要操作的节点对象
第二步：为p标签添加一个鼠标按下事件onmousedown
onmousedown:
为document添加一个鼠标移动事件onmousemove
根据当前鼠标的坐标更改box的坐标

为p标标签添加一个鼠标弹起事件
灭掉docuemnt的onmousemove事件
document.onmousemove = null; 停止拖拽
*/
var box = document.getElementById("box");
var p = document.getElementById("p");
var returning = document.getElementById("returning");
var arr = [];//存放窗口移动路径
//鼠标按下
p.onmousedown = function(e1){
var _e1 = window.event || e1;
var l = _e1.offsetX;//获取鼠标点击位置和p左边缘距离
var t = _e1.offsetY;//获取鼠标点击位置和p上边缘距离
document.onmousemove = function(e2){
var _e2 = window.event || e2;
var x = _e2.clientX - l;//box距离页面左边缘距离
var y = _e2.clientY - t;//box距离页面上边缘距离
box.style.left = x + "px";
box.style.top = y + "px";
arr.push({left:x, top:y});//将路径存入数组
}
}
//鼠标弹起
p.onmouseup = function(){
document.onmousemove = null;//当鼠标弹起的时候窗口不跟随鼠标移动
}
//路径重现
returning.onclick = function(){
var termId = setInterval(function(){//循环，10毫秒执行一次
if(arr.length==0){
clearInterval(termId);//停止循环
}
var posi = arr.shift();//弹出数组第一个对象
box.style.left = posi.left + "px";
box.style.top = posi.top + "px";
},10);
}
</script>
</body>
</html>


上述代码中有两行代码，读者可能有疑问：

var x = _e2.clientX - l;//box距离页面左边缘距离
var y = _e2.clientY - t;//box距离页面上边缘距离


_e2.clientX获得是鼠标点击位置距离页面左边的距离，减去点击点距离可拖拽区域左边缘的距离就是整体box的正确位置，这样，鼠标可以在拖拽区域内任意位置点击拖拽。读者可结合下图理解：



代码并不长，也不复杂，笔者将逻辑思路和代码注释都已经注释清楚，方便读者阅读和分析。这里，有读者可能想到网页中的广告窗，可以给弹出的广告窗口添加随鼠标移动功能。读者可以自行研究实现。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航