鼠标跟随特效 html+css+js实现

最新推荐文章于 2024-04-26 06:37:48 发布

dxjddd

最新推荐文章于 2024-04-26 06:37:48 发布

阅读量844

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/dxjddd/article/details/125819437

版权

效果图：

css样式

<style>
        div{
            width: 10px;
            height: 10px;
            background-color: red;
            border: 1px solid #000;
            position: absolute;
        }
</style>

html结构

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

js代码：

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

新手小白，望大佬们多多指教