标签：
近日项目中要做一个鼠标拖拽层的效果，于是手动使用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范围内可以随意拖动，代码注释难以理解的话，请上网搜索相关知识，希望能帮到你。
标签：
原文地址：http://www.cnblogs.com/huanghundaxia/p/5666324.html
