JS學習筆記 - 封裝getPosition函數、一串跟着鼠標的div

 

    function getPosition(ev) {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

      return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}
 //返回一個json，類似數組的東西。 json還不是很熟悉。     }

    document.onmousemove = function (ev) {
      var oEvent = ev||event;
      var oDiv = document.getElementById('div1');

      var pos = getPosition(oEvent);
      oDiv.style.left = pos.x + 'px';  
 //pos.x 相當於在前面的json（類似數組）里，調取了 x 這一項的值。

      oDiv.style.top = pos.y + 'px'; };

};

 

    function getPosition(ev) {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

      return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}
    }

    document.onmousemove = function (ev) {
      var oEvent = ev||event;
      var aDiv = document.getElementsByTagName('div');
      var pos = getPosition(oEvent);
      
      for (var i=aDiv.length-1; i>0; i--)  //倒着循環
      {
        aDiv[i].style.left = aDiv[i-1].offsetLeft+'px';
        // 第[i]個div的left值不斷被賦值為它前一個div（即aDiv[i-1]）的left值，所以這個div會跟着前一個div移動。
        aDiv[i].style.top = aDiv[i-1].offsetTop+'px';
      }

      aDiv[0].style.left = pos.x + 'px';
      aDiv[0].style.top = pos.y + 'px';
    };