样式:
- <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")
- // 绑定鼠标移动事件
- Windows.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 个的位置...... 最后再把第一个移动到光标的位置.
来源: http://www.bubuko.com/infodetail-3120926.html