首页 > 代码库 > 一连串跟着鼠标的DIV
一连串跟着鼠标的DIV
<style>
div{width:50px;height:50px;background:#00CCFF;position:absolute;}
</style>
<script>
/*
这个原理其实很简单：后面的div都跟着第一个div走。
这个可以加window.onload=function(){}加载事件。
*/
function getpos(ev)
{
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
window.onload=function()
{
document.onmousemove=function(ev)
{
var adiv=document.getElementsByTagName(‘div‘);
var oEvent=ev||event;
var pos=getpos(oEvent);
for(var i=adiv.length-1;i>0;i--)
{
adiv[i].style.left=adiv[i-1].offsetLeft+"px";
adiv[i].style.top=adiv[i-1].offsetTop+"px";
}
adiv[0].style.left=pos.x+"px";
adiv[0].style.top=pos.y+"px";
}
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
一连串跟着鼠标的DIV