JavaScript实现鼠标移动特效

最新推荐文章于 2024-05-20 15:17:08 发布

shan33__

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量415

点赞数 12

分类专栏：经典例题文章标签： javascript 前端 html ecmascript

本文链接：https://blog.csdn.net/shan33__/article/details/136455559

版权

经典例题专栏收录该内容

41 篇文章 1 订阅

订阅专栏

关键代码：

  <script>
        document.onmousemove = function (e) {
            // 加div节点
            var div = document.createElement('div');
            div.style.width = '5px';
            div.style.height = '5px';
            // 加img节点
            var img = document.createElement('img');
            // 将Img追加到div里面。
            div.appendChild(img);
            img.src = './1.jpg';
            img.style.width = '5px';
            // 给盒子设置定位，后面更改坐标位置的时候需要用
            div.style.position = 'absolute';
            // 追加div
            document.body.appendChild(div);
            // 通过事件对象获得盒子的坐标。
            var x = e.clientX;
            var y = e.clientY;
            div.style.left = x + 'px';
            div.style.top = y + 'px';
            div.style.transition = 'all 1s ease'

            // 设置多个小方块（停几秒。让小块放大一下，向上，向左右任意移动）

            setTimeout(function () {
                // 设置小方块放大
                div.style.transform = 'scale(3)';
                // 让坐标加上一个随机数将小方块的坐标进行更改
                div.style.left = x + Math.floor(Math.random() * (401)) - 200 + 'px';
                div.style.top = y + Math.floor(Math.random() * (101)) - 100 + 'px';
            }, 100);

            setTimeout(function () {
                document.body.removeChild(div)
            }, 1000);

        }
    </script>

效果图：