JavaScript实现心形div块跟随鼠标移动(幻影效果)

JavaScript实现心形div块跟随鼠标移动(幻影效果)

上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动，然后有轩辕问我，想给女朋友做一个好看的可不可以。现在我们来实现一串心形的div实现跟随鼠标的效果。如图：

HTML代码:

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

CSS代码：

        *{
            margin: 0;
            padding: 0;
        }
        .box:nth-of-type(n){
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 50%;;
            position: absolute;
        }
        .box:nth-of-type(n):after{
            display: block;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            content: "";
        }
        .box:nth-of-type(n):before{
            display: block;
            width: 10px;
            height: 10px;
            background: red;
            transform: rotate(45deg);
            position: absolute;
            left: 3px;
            top: 3px;
            content: "";
        }
        .box:nth-of-type(2n){
            width: 10px;
            height: 10px;
            background: yellow;
            border-radius: 50%;;
            position: absolute;
        }
        .box:nth-of-type(2n):after{
            display: block;
            width: 10px;
            height: 10px;
            background: yellow;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            content: "";
        }
        .box:nth-of-type(2n):before{
            display: block;
            width: 10px;
            height: 10px;
            background: yellow;
            transform: rotate(45deg);
            position: absolute;
            left: 3px;
            top: 3px;
            content: "";
        }
        .box:nth-of-type(3n){
            width: 10px;
            height: 10px;
            background: skyblue;
            border-radius: 50%;;
            position: absolute;
        }
        .box:nth-of-type(3n):after{
            display: block;
            width: 10px;
            height: 10px;
            background: skyblue;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            content: "";
        }
        .box:nth-of-type(3n):before{
            display: block;
            width: 10px;
            height: 10px;
            background: skyblue;
            transform: rotate(45deg);
            position: absolute;
            left: 3px;
            top: 3px;
            content: "";
        }
        .box:nth-of-type(4n){
            width: 10px;
            height: 10px;
            background: green;
            border-radius: 50%;;
            position: absolute;
        }
        .box:nth-of-type(4n):after{
            display: block;
            width: 10px;
            height: 10px;
            background: green;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            content: "";
        }
        .box:nth-of-type(4n):before{
            display: block;
            width: 10px;
            height: 10px;
            background: green;
            transform: rotate(45deg);
            position: absolute;
            left: 3px;
            top: 3px;
            content: "";
        }
        .box:nth-of-type(5n){
            width: 10px;
            height: 10px;
            background: pink;
            border-radius: 50%;;
            position: absolute;
        }
        .box:nth-of-type(5n):after{
            display: block;
            width: 10px;
            height: 10px;
            background: pink;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            content: "";
        }
        .box:nth-of-type(5n):before{
            display: block;
            width: 10px;
            height: 10px;
            background: pink;
            transform: rotate(45deg);
            position: absolute;
            left: 3px;
            top: 3px;
            content: "";
        }

JS代码：

    var aBox = document.getElementsByClassName("box");
    var timer;
    document.onmousemove = function (ev) {
        clearInterval(timer);
        var ev = ev || window.event;
        // 设置一个div块跟随鼠标移动
        aBox[0].style.top = ev.pageY + "px";
        aBox[0].style.left = ev.pageX + "px";

        for (var i = aBox.length - 1; i > 0; i--) {
            aBox[i].style.top = aBox[i - 1].style.top;
            aBox[i].style.left = aBox[i - 1].style.left;
        }

        timer=setInterval(function () {
            for (var i = aBox.length - 1; i > 0; i--) {
                aBox[i].style.top = aBox[i - 1].style.top;
                aBox[i].style.left = aBox[i - 1].style.left;
            }
        },100)
    }

关注我，学习前端不迷路！！！