下面代码主要实现,一组div跟着鼠标移动,形成队列式的跟随,样式很简单,可以自己设计,主要来说一下思路:第一个跟着鼠标动,后一个跟着前一个移动,就可以实现尾随的效果,具体来看一下js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
position: absolute;
width: 10px;
height: 10px;
background: red;
}
</style>
</head>
<body>
<script type="text/javascript">
//动态的创建10个div ----->并添加到body中
for(var i = 0; i < 10; i++){
var oDiv = document.createElement("div");
document.body.appendChild(oDiv);
}
//获取所有的div
var aDiv = document.getElementsByTagName("div");
//添加鼠标在页面的移动事件
document.onmousemove = function(e){
var evt = e || event; //事件源
var x = evt.clientX; //获取鼠标距离可视区域的坐标
var y = evt.clientY;
//第一个跟着鼠标走
aDiv[0].style.left = x + "px";
aDiv[0].style.top = y + "px";
//下一个跟着上一个走
for(var i = aDiv.length - 1; i>=1; i--){
aDiv[i].style.left = aDiv[i-1].style.left;
aDiv[i].style.top = aDiv[i-1].style.top;
}
}
</script>
</body>
</html>