js实现——鼠标移动时跟随着一连的小图片
Posted funseey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现——鼠标移动时跟随着一连的小图片相关的知识，希望对你有一定的参考价值。
首先放置一连的image
<body>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
</body>
然后设置样式，主要是图片的大小
<style> div position: absolute; height: 20px; width: 20px; img height: 100%; width: 100% </style>
最后就是实现行为
<script> document.onmousemove = function (eve) var e = eve || window.event; var adiv = document.getElementsByTagName("div"); //先把第一个div的位置拿到 adiv[0].style.top = e.clientY + "px"; adiv[0].style.left = e.clientX + "px"; //遍历剩下的div，让每个div的位置等于前一个div的位置，即可实现跟随行为 for (var i = adiv.length - 1; i > 0; i--) adiv[i].style.top = adiv[i - 1].style.top adiv[i].style.left = adiv[i - 1].style.left </script>
一个简单的小案例便完成了。效果图如下：
ps:div可以多给点，以防看不出效果
以上是关于js实现——鼠标移动时跟随着一连的小图片的主要内容，如果未能解决你的问题，请参考以下文章