1.首先来n个div
自己随便设置多少个圆
<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
2.设置css样式
div{width: 100px;height: 100px;border-radius: 50%;position: absolute;background: red;}
3.getPos源码
//获取鼠标x,y(横纵坐标)
function getPos(ev)
{ //可视化页面，离全页面，顶部和左边，的top或者left值
var scrollTop =document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft =document.documentElement.scrollLeft||document.body.scrollLeft;
//页面中鼠标的x,y值 = 可视化鼠标的x,y值 + 可视化页面left,top值
return {x: ev.clientX+scrollLeft, y: ev.clientY +scrollTop};
};
4.js实现源码
使用getPos方法获取当前元素到页面的距离，在此，是鼠标到页面的距离
使用for循环，让每一个div都改变自身的left，和top值，并且保持与前一个div运动轨迹相同。所以鼠标一动，div就会跟着鼠标一起动，犹如贪吃蛇一般。
<style>
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';
};
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
