大家好,又见面了,我是你们的朋友全栈君。
效果图:
html code:
1 <div id="div1" class="div"></div> 2 <div id="div2" class="div"></div> 3 <div id="div3" class="div"></div> 4 <div id="div4" class="div"></div> 5 <div id="div5" class="div"></div> 6 <div id="div6" class="div"></div> 7 <div id="div7" class="div"></div> 8 <div id="div8" class="div"></div> 9 <div id="div9" class="div"></div> 10 <div id="div10" class="div"></div>
css code:
1 body { 2 position: relative; 3 } 4 5 div { 6 width: 20px; 7 height: 20px; 8 position: absolute; 9 } 10 11 #div1 { 12 background: red; 13 } 14 15 #div2 { 16 background: blue; 17 } 18 19 #div3 { 20 background: pink; 21 } 22 23 #div4 { 24 background: hotpink; 25 } 26 27 #div5 { 28 background: yellow; 29 } 30 31 #div6 { 32 background: black; 33 } 34 35 #div7 { 36 background: gray; 37 } 38 39 #div8 { 40 background: deeppink; 41 } 42 43 #div9 { 44 background: lightskyblue; 45 } 46 47 #div10 { 48 background: green; 49 }
js code
1 var divs = document.getElementsByClassName("div"); 2 3 document.onmousemove = function(e) { 4 var even = e || event; 5 for(var i = divs.length - 1; i > 0; i--) { 6 divs[i].style.left = divs[i - 1].style.left; 7 divs[i].style.top = divs[i - 1].style.top; 8 } 9 divs[0].style.left = even.clientX + "px"; 10 divs[0].style.top = even.clientY + "px"; 11 }
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155295.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...