一连串div跟随鼠标移动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一连串元素跟着鼠标移动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        p{
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script src="../public.js"></script>
</head>
<body>
<div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
</body>
<script>
    var aP=document.querySelectorAll(".box p")
    addEvent(document,"mousemove",move)
    function move(eve) {
        var e = eve || window.event
        for (var i = aP.length - 1; i > 0; i--) {
            for (var i = aP.length - 1; i > 0; i--) {
                aP[i].style.left = aP[i - 1].offsetLeft + "px";
                aP[i].style.top = aP[i - 1].offsetTop + "px";
            }
            // 最后操作第一个元素
            aP[0].style.left = e.pageX +  "px";
            aP[0].style.top = e.pageY +  "px";
        }
    }
</script>
</html>

 

posted @ 2019-08-28 17:39  菜鸟小何  阅读(334)  评论(0)  编辑  收藏  举报