<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标跟随特效</title>
<style>
* {
margin: 0;
padding: 0;
}
.ball {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
</style>
<script>
window.onload =function () {
//创建20个小球
var
aBall = [];
oFragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
var
oBall = document.createElement('div');
oBall.className = 'ball';
oBall.style.backgroundColor = 'rgba(0,0,0,'+(1-i*0.05)+')';
oBall.style.left = '-10px';
oBall.style.top = '-10px';
oFragment.appendChild(oBall);
aBall.push(oBall);
}
//一次性添加到body里
document.body.appendChild(oFragment);
//给document添加onmousemove事件
document.onmousemove = function (ev) {
var
ev = ev || window.event,
iX = ev.clientX,
iY = ev.clientY;
//给20个小球的位置进行赋值
for(var i = aBall.length-1;i > 0; i--){
aBall[i].style.left = aBall[i - 1].offsetLeft + 'px';
aBall[i].style.top = aBall[i - 1].offsetTop + 'px';
}
aBall[0].style.left = iX + 'px';
aBall[0].style.top = iY + 'px';
}
}
</script>
</head>
<body>
</body>
</html>鼠标跟随特效
猜你喜欢
转载自blog.csdn.net/weixin_41218855/article/details/90321095
今日推荐
周排行