一连串跟随鼠标移动的元素

此案例的核心点在于如何设置跟随鼠标的移动,思路是将上一个元素的offsetLeft/Top值赋值给下一个元素的left/top,将最后一个div的left/top值直接找鼠标的位置
以下为html结构

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

以下给div设置样式

	<style>
              *{margin:0;padding: 0;}
              div{
                  width:10px;
                  height:10px;
                  border-radius: 50%;
                  background: black;
                  /* 重点:这里将div设置了绝对定位 */
                  position: absolute;
              }
        </style>

以下为js部分

   <script>
        var adiv=document.querySelectorAll(‘div‘);
        document.onmousemove=function(eve){
            var e=eve||window.event;
            for(var i=0;i<adiv.length-1;i++){
	            //重点:将上一个元素的offsetLeft/Top值赋值给下一个元素的left/top
                adiv[i].style.left=adiv[i+1].offsetLeft+‘px‘;
                adiv[i].style.top=adiv[i+1].offsetTop+‘px‘;
            }
            //重点:将最后一个div的left/top值找鼠标的位置
            adiv[adiv.length-1].style.left=e.pageX+‘px‘;
            adiv[adiv.length-1].style.top=e.pageY+‘px‘;
        }
    </script>

期间有遇到朋友在写循环的时候,for(var i=adiv.length-1;i--) 此思路为倒序,下面依次更改即可...

一连串跟随鼠标移动的元素

上一篇:springboot2.x整合tkmapper


下一篇:什么是APP封装?APP封装如何实现?