一串跟随鼠标移动的元素（类似丝带，当棍子挥动时，丝带跟随棍子）

最新推荐文章于 2024-09-22 11:17:00 发布

一个萌新小土豆

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量278

点赞数

文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/SHX_fusheng/article/details/106693490

版权

        #box8 div{
            width: 10px;
            height: 10px;
            background: blue;
            position: absolute;
        }

HTML代码
    <div id="box8">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

JavaScript代码
        var aDiv = document.querySelectorAll("#box8 div");
        document.onmousemove = function(eve){
            var e = eve || window.event;
            for(var n=aDiv.length-1;n>0;n--){
                aDiv[n].style.left = aDiv[n-1].style.left;
                aDiv[n].style.top = aDiv[n-1].style.top;
            }
            aDiv[0].style.left = e.clientX + "px";
            aDiv[0].style.top = e.clientY + "px";
        }