Effect:
Ideas:
Use the OnMouseMove event, and then get the coordinates of the mouse, then the DIV traversal, and finally the mouse coordinates assigned to the Div.
Code:
var oevent = EV | | Event Judging compatibility
var pos = getmouse (oevent); After determining the compatibility, use the mouse to move the coordinate function to obtain the horizontal ordinate
for (var i = div.length-1 i > 0; i--) {//Traversal div, starting from the last.
Div[i].style.left = div[i-1].offsetleft + ' px '; Offsetleft the previous one to the latter
Div[i].style.top = div[i-1].offsettop + ' px '; Offsettop the previous one to the latter
}
Div[0].style.left = pos.x + ' px '; The horizontal axis of the mouse is given to the first
Div[0].style.top = pos.y + ' px '; The ordinate of the mouse to the first
}
function Getmouse (EV) {//get the coordinates of the mouse movement
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
var scrollleft = Document.documentElement.scrollLeft | | Document.body.scrollLeft;
return {x:ev.clientx + scrollleft, Y:ev.clienty + scrolltop}
}
</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>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
