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

一连串跟随鼠标的DIV

时间:2016-12-12 23:23:55      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:meta   display   move   gray   order   ack   mat   clientx   abs   

<!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

标签:meta   display   move   gray   order   ack   mat   clientx   abs   

原文地址:http://www.cnblogs.com/biyanshun/p/6166118.html

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