<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
position:absolute;
height: 50px;
width: 50px;;
}
</style>
</head>
<body style="background: cyan;">
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<script>
//获得所有img对象数组
var imgs=document.getElementsByTagName("img");
//鼠标事件
document.onmousemove=function(event){
//实现兼容
var e=event||window.event
//获取鼠标距浏览器的位置
var cx=e.clientX;
var cy=e.clientY;
//把鼠标距浏览器的位置设置给第一张图片，以实现图片跟着鼠标的效果
imgs[0].style.top=cy+"px";
imgs[0].style.left=cx+"px";
//后面的图片基于第一张图片进行移动
for(i=imgs.length-1;i>0;i--){
imgs[i].style.top=imgs[i-1].style.top;
imgs[i].style.left=imgs[i-1].style.left;
}
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/ma-shan/p/5557658.html