JS === 实现多个光标跟随事件
样式：
<style>
div{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个的位置......最后再把第一个移动到光标的位置。