博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS-鼠标彩色拖尾小效果
阅读量:6290 次
发布时间:2019-06-22

本文共 2671 字,大约阅读时间需要 8 分钟。

实现步骤解析:

     * 这原本就是一个鼠标后面跟随一串小方块的效果,
     * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的,
     * 并且每一个小方块的色彩是随机分配而不是我自己手动填写的。

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   2   3       4         
5 鼠标彩色拖尾小效果 6
7 17 53 54 55

鼠标移进来试试

56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117 118

 

转载于:https://www.cnblogs.com/padding1015/p/6794802.html

你可能感兴趣的文章
联络中心演化的四个特征
查看>>
《SQL与关系数据库理论——如何编写健壮的SQL代码》》一1.4 原始模型回顾
查看>>
云数据中心UPS供电系统需具备的特性
查看>>
低碳出行下的新宠儿:多方通信下的云视频会议
查看>>
京东发布物联网战略 将推出智子万家升级体验计划
查看>>
昆明:“互联网+政务”助推智慧城市建设
查看>>
soapUI的Mocservice仿真测试问题
查看>>
DBImport v3.44 中文版发布:数据库数据互导及文档生成工具(IT人员必备)
查看>>
说说SDN和云平台对接
查看>>
物联网给中国智造插上翅膀
查看>>
51Testing专访史亮:测试人员在国外
查看>>
“黑科技”安防界遍地开花 公安实战如何应用?
查看>>
《C++编程规范:101条规则、准则与最佳实践》——2.9 确保资源为对象所拥有。使用显式的RAII和智能指针...
查看>>
《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.1 简介
查看>>
《SOA达人迷》目录—导读
查看>>
Apache Kylin权威指南1.5 Apache Kylin的主要特点
查看>>
Java IO: 其他字节流(上)
查看>>
Java中的锁
查看>>
节省60%费用!巧用阿里云归档存储降低基因测序成本
查看>>
《Adobe Dreamweaver CS6中文版经典教程》——1.7 创建自定义的快捷键
查看>>