码迷,mamicode.com
首页 > 移动开发 > 详细

js实现——鼠标移动时跟随着一连的小图片

时间:2019-09-01 23:32:12      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:鼠标   clientx   height   image   完成   移动   doc   效果   col   

首先放置一连的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实现——鼠标移动时跟随着一连的小图片

标签:鼠标   clientx   height   image   完成   移动   doc   效果   col   

原文地址:https://www.cnblogs.com/funseey/p/11444164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!