跟随鼠标的元素

最新推荐文章于 2024-05-13 15:06:53 发布

.不喜欢吃鸭头

最新推荐文章于 2024-05-13 15:06:53 发布

阅读量120

点赞数

分类专栏： css+js 文章标签： js css html javascript css3

本文链接：https://blog.csdn.net/wangYaj/article/details/113621994

版权

css+js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、一连串跟随鼠标移动的元素

1、css

<style>
     div{width: 10px;height: 10px;background: red;position: absolute;left: 0;top: 0;}
</style>

2、html

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

3、js

<script>
    var adiv = document.querySelectorAll("div");
    document.onmousemove = function(eve){
        var e = eve || window.event;
        for(var i=adiv.length-1;i>0;i--){
            adiv[i].style.left = adiv[i-1].offsetLeft + "px";
            adiv[i].style.top = adiv[i-1].offsetTop + "px";
        }
        adiv[0].style.left = e.pageX + "px";
        adiv[0].style.top = e.pageY + "px";
    }
</script>

二、主逻辑

因为一个元素离开了原来的位置之后，原来的位置就找到不到了
所以，需要先操作最后一个元素，找前一个元素的位置，此时前一个元素还没有开始移动，所以能找到原来的位置
最后再操作第一个元素跟着鼠标走

.不喜欢吃鸭头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟随鼠标的元素

一、一连串跟随鼠标移动的元素1、css<style> div{width: 10px;height: 10px;background: red;position: absolute;left: 0;top: 0;}</style>2、html<body> <div></div> <div></div> <div></div> <div>
复制链接

扫一扫