首先放置一連的image 然後設置樣式,主要是圖片的大小 最後就是實現行為 一個簡單的小案例便完成了。效果圖如下: ps:div可以多給點,以防看不出效果 ...
首先放置一連的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可以多給點,以防看不出效果