JS实现跟随

最新推荐文章于 2022-05-24 11:19:24 发布

sdfujichao

最新推荐文章于 2022-05-24 11:19:24 发布

阅读量1.5k

点赞数 3

分类专栏： javascript 文章标签：跟随 JS事件监听控件跟随鼠标移动 JS函数封装

本文链接：https://blog.csdn.net/sdfujichao/article/details/51274818

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

思路：让鼠标移动的同时后面创建小的div，随着鼠标的移动而移动，div的个数是有限的

方案1；让鼠标移动时创建新的div，限制总个数，后面超出的个数就删除。

方案2：循环引用。让随后一个div的位置移动到当前鼠标的位置

实现思路：用数组存放div。让最后一个和第一个div交换，其它的数组下标向后移动一个下标。

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   <script type="text/javascript">
   var bod = document.body;
           var num = 20;// 控制显示的div的个数
           var count = 0;
           var arr =[];
       document.onmousemove = function(event){
           if(count<num){
               for(;count<num;count++){
                   var subDiv = document.createElement("div");
                   subDiv.style.width = "10px";
                   subDiv.style.height = "10px";
                   subDiv.style.backgroundColor = "red";
                   subDiv.style.top = event.clientY+"px";
                   subDiv.style.left = event.clientX+"px";
                   subDiv.style.position = "absolute";
                   subDiv.id = count.toString();
                   bod.appendChild(subDiv);
                   arr[count] = subDiv;
               }
           }else{
               var temp = arr[num-1];
               for(var i=num-1;i>0;i--){
               arr[i]=arr[i-1];
               }
               arr[0]=temp;
               arr[0].style.top = event.clientY+"px";
               arr[0].style.left = event.clientX+"px";
            }
       }
   </script>
   </body>

</html>