<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖影</title>
<style>
*{
margin:0;
padding: 0;
}
div{
/*width: 10px;
height: 10px;*/
border-radius: 50%;
/*background-color: red;*/
position: absolute;
left:100px;
top:100px;
}
</style>
</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>
<script>
var divs = document.getElementsByTagName('div');
// 设置随机数
function rand(min,max){
return parseInt(Math.random()*(max - min + 1) + min);
}
for(var i=0; i<divs.length; i++){
// 设置背景色
divs[i].style.backgroundColor = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')'
// 设置大小
divs[i].style.width = i * 4 + 'px';
divs[i].style.height = i * 4 + 'px';
}
document.onmousemove = function(e){
var e = e || window.event;
for(var i=0; i<divs.length; i++){
// 设置背景色
divs[i].style.backgroundColor = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')' ;
}
var i = -1;
var time = setInterval(function(){
i++;
if(i >= divs.length - 1){
clearInterval(time);
}
divs[i].style.left = e.clientX - divs[i].clientWidth / 2 + 'px';
divs[i].style.top = e.clientY - divs[i].clientHeight / 2 + 'px';
},100);
}
</script>
</body>
</html>
js实现拖影效果
最新推荐文章于 2024-05-25 15:33:11 发布