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>

JS-鼠标彩色拖尾小效果相关推荐

原生JS鼠标移动拖尾效果
JS 代码 function getMousePos(event) {var e = event || window.event;var mouseInfo = {mouseX : e.clientX ...
html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
cocos：MotionStreak拖尾渐隐效果
目录前言小例创建和传参推送结语前言本文简介cocos的MotionStreak组件,该组件非常方便的实现了一个拖尾效果,配合粒子能够实现非常好看的效果,本文则从使用上介绍一下,以后有机会 ...
html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...
鼠标烟雾拖尾（含代码）
鼠标拖尾是一种计算机图形学技术,用于模拟物体在空间中的运动.它通过在物体的轨迹上放置一系列点来实现,这些点可以用来模拟物体的运动,从而使物体看起来更加真实.鼠标拖尾可以用于模拟物体的运动,例如火焰.水 ...
Unity 制作鼠标光标拖尾
首先创建个Empty起名Mouse 然后给Empty添加 Trail Renderer (设置好粗细,颜色,时间等设置) 创建脚本挂载到Mouse上拖尾组件以及脚本 using UnityEngin ...
html+js 实现鼠标粒子拖尾效果其中调用underscore和jQuery库
演示视频: 运用了underscore和jQuery库,将库导入项目文件并调用即可, 如下代码的: <script src="underscore.min.js" type= ...
js 实现鼠标移动拖尾效果
img需要添加绝对定位 img { position: absolute; } js代码: //声明一个变量计次 var count=0; //鼠标相对于文档移动时触发移动时间 document.on ...

JS-鼠标彩色拖尾小效果

JS-鼠标彩色拖尾小效果相关推荐

最新文章

热门文章