实现步骤解析:
* 这原本就是一个鼠标后面跟随一串小方块的效果, * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的, * 并且每一个小方块的色彩是随机分配而不是我自己手动填写的。
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>