JS === 实现多个光标跟随事件

JS === 实现多个光标跟随事件

样式:

<style>

  div{width:50px;height:50px;background:red;position:absolute} 

</style>

结构:

  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>

 

JS:

<script>

  //获取所有div

  var divs = document.querySelectorAll("div")

  //绑定鼠标移动事件

  window.onmousemove = function(evt){

  //获取光标的位置

  var x = evt.clientX; 

  var y = evt.clientY;

  //循环遍历所有div

  for(var i = divs.length-1; i >=1; i--){

    divs[i].style.left = divs[i-1].offsetLeft + "px";   // 前一个div位置 给当前div
    divs[i].style.top = divs[i-1].offsetTop +"px";

  } 

  divs[0].style.left = x + "px";   //第一个div的位置始终是光标移动到的位置,最后把第一个div的位置移动到光标所在位置
  divs[0].style.top = y+ "px";

  }

</script>

 

解题思路:

1. 多个div跟随光标,第一个div的位置 始终是 光标移动到的位置。

2. 第二个div,当移动的过程中,会到第一个div之前的位置,第三个div 会到第二个div 之前的位置。

3.前一个div的位置赋给当前的div

4.for(var i = divs.length-1; i >=1; i--)  循环从最后一个开始的原因:

  如果 这样写:

  divs[0].style.left = x + "px";   

  divs[0].style.top = y+ "px";

  for(var i = 1; i < divs.length ; i++){ 

  divs[i].style.left = divs[i-1].offsetLeft + "px";
  divs[i].style.top = divs[i-1].offsetTop +"px";

  }

//当第一个移动到光标位置的时候,第一个原来的位置已经丢了,所以第二个div 移动到第一个的位置时候,也直接移动到了光标所在的位置

// 所以从最后开始,在第一个div 还没移动的时候,第10个去到第9个,第9个去到第8个的位置......最后再把第一个移动到光标的位置。

上一篇:解决Org和博客园模板的冲突问题


下一篇:【艾琪出品】-轻量级框架开发应用 、学习资料