1. 程式人生 > 實用技巧 >一連串跟隨滑鼠移動的元素

一連串跟隨滑鼠移動的元素

此案例的核心點在於如何設定跟隨滑鼠的移動,思路是將上一個元素的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--) 此思路為倒序,下面依次更改即可...