JS实现跟随

思路:让鼠标移动的同时后面创建小的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>



JS实现跟随_第1张图片


你可能感兴趣的:(跟随,JS事件监听,控件跟随鼠标移动,JS函数封装)