<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>
js实现图片跟随鼠标移动效果
原创fengGer的bugs 博主文章分类:js简单案例 ©著作权
文章标签 跟随鼠标移动效果 css javascript 偏移量 JavaScript 文章分类 JavaScript 前端开发
上一篇:简易切换图片效果和简易年历
-
让元素跟随鼠标移动
让元素跟随鼠标移动
html5课程 微信 html 人工智能 css -
JS实现图片跟随鼠标移动
在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下。在实现这个特效之前,需要了解JS中一个对象,eve
鼠标移动 赋值 sed 事件对象 html -
对象跟随鼠标移动(用向量)
这里下载一个gameobject的库,封装了向量计算
sed fish 封装 其他 -
dockerconfigjson解码
docker是什么?docker是一个go语言开发的应用容器引擎。docker的作用?①运行容器里的应用;②docker是用来管理容器和镜像的一种工具。 容器 与 虚拟机 的区别?容器
dockerconfigjson解码 docker 容器 运维 centos