使用JavaScript写的鼠标拖动效果
近日项目中要做一个鼠标拖拽层的效果，于是手动使用Jquery做了一个，发出来跟大伙儿分享一下，并希望能得到高手的指点，如果哪位大侠觉得我的思路和代码不正确或者需要改进的话，希望能指点一二，在下感激不尽。
效果展示
下面是我的源代码
<html>
<head>
<style>
div{
width:200px;
height:200px;
background-color:red;
position:absolute;
}
</style>
<script>
function getPos(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
// 为了实现兼容性按道理来说在网页的头部加上<!DOCTYPE html>之后，只是用document.documentElement.scrollTop这个就可以了，但是谷歌
// 浏览器却不支持这个，而是支持document.body.scrollTop。由于任何一种浏览器只支持其中的一个，所以两个相加就实现了兼容性了
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
// scrollLeft：页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度
// clientLeft：就是透过浏览器看内容的这个区域左边的宽度
}
document.onmousemove=function (ev){
var aDiv=document.getElementsByTagName(‘div‘);
var oEvent=ev||event;
// 这一句这么写是要兼容各个浏览器，兼容IE和FireFox Chrome 只要一个为真就可以执行，在FireFox浏览器中，
// 事件绑定的函数要获取到事件本身，需要从函数中传入，而IE等浏览器则可以直接使用event或者window.event得到事件本身
var pos=getPos(oEvent);
for(var i=aDiv.length-1;i>0;i--){
aDiv[i].style.left=aDiv[i-1].offsetLeft+‘px‘;
// 获取的是相对于父对象的左边距，可以判断一个物体的跟document的左边距离，也就是浏览器左边缘
aDiv[i].style.top=aDiv[i-1].offsetTop+‘px‘;
}
aDiv[0].style.left=pos.x+‘px‘;
aDiv[0].style.top=pos.y+‘px‘;
}
</script>
</head>
<body>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/3.jpg"></div>
</body>
</html>
通过演示，鼠标移动onmousemover 的情况下，div会随着移动有一个重影效果。在body范围内可以随意拖动，代码注释难以理解的话，请上网搜索相关知识，希望能帮到你。
时间： 2024-10-08 11:21:53