首页 > 代码库 > 一连串跟随鼠标的DIV
一连串跟随鼠标的DIV
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background:gray;
}
div{
width:50px;
height:50px;
position:absolute;
left:300px;
top:300px;
border-radius:50%;
background:red;
text-align:center;
}
</style>
<script>
window.onload = function(){
//获取页面元素
var aDiv = document.getElementsByTagName(‘div‘);
document.onmousemove = function(e){
var e = e || window.event;
aDiv[0].style.display = "block";
aDiv[0].style.left = e.clientX +‘px‘;
aDiv[0].style.top = e.clientY + "px";
for(var i=aDiv.length-1 ; i>0 ; i--){
//后面的位置等于前面的位置
aDiv[i].style.left = aDiv[i-1].style.left;
aDiv[i].style.top = aDiv[i-1].style.top;
aDiv[i].innerHTML = i + 1;
//随机颜色
aDiv[i].style.background =‘rgb(‘+ parseInt(Math.random()*256) + ‘,‘ + parseInt(Math.random()*256)+‘,‘ + parseInt(Math.random()*256)+‘)‘;
}
}
}
</script>
</head>
<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>
<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>
</html>
一连串跟随鼠标的DIV