JS-鼠标彩色拖尾小效果
实现步骤解析：
* 这原本就是一个鼠标后面跟随一串小方块的效果，
* 后来我就想，运用之前学的随机数的案例把小方块的颜色做成彩色的，
* 并且每一个小方块的色彩是随机分配而不是我自己手动填写的。
1 function getColor(){ 2 var oMath = Math.floor(Math.random()*255); 3 var rgb = "rgb("+ 4 Math.floor(Math.random()*255)+","+ 5 Math.floor(Math.random()*255)+","+ 6 Math.floor(Math.random()*255)+")"; 7 return rgb; 8 }
* 等实现了以后，我又感觉虽然颜色都不一样了，但是只要页面不关闭他们就永远被分配了这个颜色不能变化了
* 于是我又想让其颜色是随时随地随机变化随便什么颜色了。
* 于是就将随机分配颜色的函数给了鼠标移动事件。
* 之所以这么废话的原因，是我想记录下自己是怎么一步一步实现这个效果的。
* 因为通常情况下，我们都是拿到一个效果后就蒙了，
* 其实如果从内向外或者从外向内一层层剖析，然后一步步实现，不自乱阵脚，是可以实现最终的宏伟蓝图的。
* 代码中：
* getColor()函数是一个生成随机颜色值的函数，在需要给元素填充颜色的地方，直接调用就ok；
* 其代码核心是 Math.floor(Math.random()*255) 这句，他获取到的是0-255之间的任意一个值，
* 然后把r,g,b三个值分别用这句代码代替，凑成一个整的颜色值字符串赋给变量，最后弹出就ok了。
* onmousemove函数中，是当鼠标有移动的时候会发生的事情，
* 本来i的for循环是在这个函数的外边的，我为了让小方块可以随时随地换随机颜色，就把他放进了鼠标事件里边，每当鼠标移动一次，就从新调用一个颜色值，这样就会在鼠标移动的时候变颜色了。
* 而多个小方块可以跟随的原理则是：
* 所有小方块的属性为绝对定位
* 其left和top值在鼠标变换时接受js传值改变。而值变化的规律是：后一个的left值等于前一个的offsetLeft值；top值等于前一个的offsetTop值
* 注意的是，在这个循环中，是倒着循环的。
* 最关键的是，第一个的值跟随鼠标的值+页面滚动上去的值。
* 因为，鼠标的xy坐标值，只是鼠标相对于电脑屏幕（这么说更形象化，其实是根据浏览器界面）的值。
* 而小方块或元素的xy坐标值（即left,top)则是根据的整个document||body页面，
* 一旦页面发生滚动，小方块和鼠标的xy值将不再重合，而他们之间的差距就是scrollLeft和scrollTop；
* 所以，最终的left、top值就是鼠标x、y值与对应的scrollleft、scrolltop值之和。
* 另：
* 这个代码还需要最后的封装处理。为了很好的体现我的制作思路我就不封装了。以后用到了可以拿下来再自己封装
源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鼠标彩色拖尾小效果</title> 6 <meta name="author" content="郭菊锋/702004176@qq.com"/> 7 <style type="text/css"> 8 *{margin: 0;padding: 0;} 9 body div{ 10 position: absolute; 11 width: 10px; 12 height: 10px; 13 /*margin: 10px;*/ 14 /*background: rgb(255,255,255);*/ 15 } 16 </style> 17 <script type="text/javascript"> 18 window.onload = function(){ 19 function getColor(){ 20 var oMath = Math.floor(Math.random()*255); 21 // console.log(maTh) 22 var rgb = "rgb("+ 23 Math.floor(Math.random()*255)+","+ 24 Math.floor(Math.random()*255)+","+ 25 Math.floor(Math.random()*255)+")"; 26 return rgb; 27 } 28 // console.log(getColor()) 29 var oDiv = document.getElementsByTagName("div"); 30 31 window.onmousemove = function(ev){ 32 for(var i=0;i<oDiv.length;i++){ 33 oDiv[i].style.backgroundColor = getColor(); 34 } 35 var ev = ev || window.event; 36 var oScrollleft = document.documentElement.scrollleft || document.body.scrollLeft; 37 var oScrolltop = document.documentElement.scrollTop || document.body.scrollTop; 38 var oLeft = ev.clientX + oScrollleft + "px"; 39 var oTop = ev.clientY + oScrolltop + "px"; 40 // for(var a = oDiv.length;a>0;a++){ 41 // oDiv[a].style.top = oDiv[a-1].style.top; 42 // oDiv[a].style.left = oDiv[a-1].style.left; 43 for(var a = oDiv.length-1;a>0;a--){ 44 oDiv[a].style.top = oDiv[a-1].offsetTop + "px"; 45 oDiv[a].style.left = oDiv[a-1].offsetLeft + "px"; 46 } 47 oDiv[0].style.top = oTop; 48 oDiv[0].style.left = oLeft; 49 } 50 51 } 52 </script> 53 </head> 54 <body> 55 <h3>鼠标移进来试试</h3> 56 <div></div> 57 <div></div> 58 <div></div> 59 <div></div> 60 <div></div> 61 <div></div> 62 <div></div> 63 <div></div> 64 <div></div> 65 <div></div> 66 <div></div> 67 <div></div> 68 <div></div> 69 <div></div> 70 <div></div> 71 <div></div> 72 <div></div> 73 <div></div> 74 <div></div> 75 <div></div> 76 <div></div> 77 <div></div> 78 <div></div> 79 <div></div> 80 <div></div> 81 <div></div> 82 <div></div> 83 <div></div> 84 <div></div> 85 <div></div> 86 <div></div> 87 <div></div> 88 <div></div> 89 <div></div> 90 <div></div> 91 <div></div> 92 <div></div> 93 <div></div> 94 <div></div> 95 <div></div> 96 <div></div> 97 <div></div> 98 <div></div> 99 <div></div> 100 <div></div> 101 <div></div> 102 <div></div> 103 <div></div> 104 <div></div> 105 <div></div> 106 <div></div> 107 <div></div> 108 <div></div> 109 <div></div> 110 <div></div> 111 <div></div> 112 <div></div> 113 <div></div> 114 <div></div> 115 <div></div> 116 <div></div> 117 </body> 118 </html>
