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';
    };