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个的位置......最后再把第一个移动到光标的位置。