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>

 

越努力,越幸运;阿门。
posted @ 2017-05-02 10:04  xing.org1^  阅读(1177)  评论(0编辑  收藏  举报