码迷,mamicode.com
首页 > 其他好文 > 详细

一连串跟着鼠标的DIV

时间:2017-06-17 18:27:52      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:func   oev   加载   ret   win   image   var   tag   scroll   

技术分享

 

<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

标签:func   oev   加载   ret   win   image   var   tag   scroll   

原文地址:http://www.cnblogs.com/xiaoyangtian/p/7040605.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!