<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现鼠标滑动背景跟随</title>
<style>
body{
background: black;
}
img{
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
}
</style>
<script>
window.onload = function () {
var img = document.getElementsByTagName("img");
document.onmousemove = function (far) {
e = far||event;
for(var i=img.length-1; i>0; i--){
img[i].style.left = img[i-1].style.left;
img[i].style.top = img[i-1].style.top;
}
img[0].style.left = e.clientX-50+"px";
img[0].style.top = e.clientY-50+"px";
}
}
</script>
</head>
<body>
<img src="image/girl.gif"/>
<img src="image/girl.gif"/>
<img src="image/girl.gif"/>
<img src="image/girl.gif"/>
<img src="image/girl.gif"/>
<img src="image/girl.gif"/>
<img src="image/girl.gif"/>
</body>
</html>