js实现图片跟随鼠标移动效果
时间：2021-03-06 10:12:59|栏目：JavaScript代码|点击： 次
本文实例为大家分享了js实现图片跟随鼠标移动效果的具体代码，供大家参考，具体内容如下
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 1000px;
height: 600px;
background: #cecece;
margin: 20px auto;
}
img{
width: 50px;
height: 50px;
border-radius: 50%;
background: #f00;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
</div>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
var oImg=document.getElementsByClassName("img");
oBox.onmousemove = function(e) {
var e = e || window.event;
var left = e.clientX;
var top = e.clientY;
//console.log(left, top);
//设置oImg偏移量
//oImg.style.left = left + "px";
//oImg.style.top = top + "px";
oImg[0].style.left=left + "px";
oImg[0].style.top=top + "px";
for(var i=oImg.length-1;i>0;i--){
oImg[i].style.left=oImg[i-1].style.left;
oImg[i].style.top=oImg[i-1].style.top;
}
}
}
</script>
</body>
javascript入门教程专题点击链接查看：javascript入门教程
上一篇：firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
栏 目：JavaScript代码
本文标题：js实现图片跟随鼠标移动效果
本文地址：http://www.codeinn.net/misctech/75510.html
