JS-鼠标彩色拖尾小效果
实现步骤解析:
* 这原本就是一个鼠标后面跟随一串小方块的效果,
* 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的,
* 并且每一个小方块的色彩是随机分配而不是我自己手动填写的。
function getColor(){
var oMath = Math.floor(Math.random()*255);
var rgb = "rgb("+
Math.floor(Math.random()*255)+","+
Math.floor(Math.random()*255)+","+
Math.floor(Math.random()*255)+")";
return rgb;
}
随机颜色值封装函数
* 等实现了以后,我又感觉虽然颜色都不一样了,但是只要页面不关闭他们就永远被分配了这个颜色不能变化了
* 于是我又想让其颜色是随时随地随机变化随便什么颜色了。
* 于是就将随机分配颜色的函数给了鼠标移动事件。
aaarticlea/png;base64,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" alt="" />
* 之所以这么废话的原因,是我想记录下自己是怎么一步一步实现这个效果的。
* 因为通常情况下,我们都是拿到一个效果后就蒙了,
* 其实如果从内向外或者从外向内一层层剖析,然后一步步实现,不自乱阵脚,是可以实现最终的宏伟蓝图的。
* 代码中:
* getColor()函数是一个生成随机颜色值的函数,在需要给元素填充颜色的地方,直接调用就ok;
* 其代码核心是 Math.floor(Math.random()*255) 这句,他获取到的是0-255之间的任意一个值,
* 然后把r,g,b三个值分别用这句代码代替,凑成一个整的颜色值字符串赋给变量,最后弹出就ok了。
aaarticlea/png;base64,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" alt="" />
* onmousemove函数中,是当鼠标有移动的时候会发生的事情,
* 本来i的for循环是在这个函数的外边的,我为了让小方块可以随时随地换随机颜色,就把他放进了鼠标事件里边,每当鼠标移动一次,就从新调用一个颜色值,这样就会在鼠标移动的时候变颜色了。
* 而多个小方块可以跟随的原理则是:
* 所有小方块的属性为绝对定位
aaarticlea/png;base64,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" alt="" />
* 其left和top值在鼠标变换时接受js传值改变。而值变化的规律是:后一个的left值等于前一个的offsetLeft值;top值等于前一个的offsetTop值
aaarticlea/png;base64,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" alt="" />
* 注意的是,在这个循环中,是倒着循环的。
aaarticlea/png;base64,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" alt="" />
* 最关键的是,第一个的值跟随鼠标的值+页面滚动上去的值。
aaarticlea/png;base64,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" alt="" />
* 因为,鼠标的xy坐标值,只是鼠标相对于电脑屏幕(这么说更形象化,其实是根据浏览器界面)的值。
* 而小方块或元素的xy坐标值(即left,top)则是根据的整个document||body页面,
* 一旦页面发生滚动,小方块和鼠标的xy值将不再重合,而他们之间的差距就是scrollLeft和scrollTop;
* 所以,最终的left、top值就是鼠标x、y值与对应的scrollleft、scrolltop值之和。
aaarticlea/png;base64,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" alt="" />
* 另:
* 这个代码还需要最后的封装处理。为了很好的体现我的制作思路我就不封装了。以后用到了可以拿下来再自己封装
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标彩色拖尾小效果</title>
<meta name="author" content="郭菊锋/702004176@qq.com"/>
<style type="text/css">
*{margin: 0;padding: 0;}
body div{
position: absolute;
width: 10px;
height: 10px;
/*margin: 10px;*/
/*background: rgb(255,255,255);*/
}
</style>
<script type="text/javascript">
window.onload = function(){
function getColor(){
var oMath = Math.floor(Math.random()*255);
// console.log(maTh)
var rgb = "rgb("+
Math.floor(Math.random()*255)+","+
Math.floor(Math.random()*255)+","+
Math.floor(Math.random()*255)+")";
return rgb;
}
// console.log(getColor())
var oDiv = document.getElementsByTagName("div"); window.onmousemove = function(ev){
for(var i=0;i<oDiv.length;i++){
oDiv[i].style.backgroundColor = getColor();
}
var ev = ev || window.event;
var oScrollleft = document.documentElement.scrollleft || document.body.scrollLeft;
var oScrolltop = document.documentElement.scrollTop || document.body.scrollTop;
var oLeft = ev.clientX + oScrollleft + "px";
var oTop = ev.clientY + oScrolltop + "px";
// for(var a = oDiv.length;a>0;a++){
// oDiv[a].style.top = oDiv[a-1].style.top;
// oDiv[a].style.left = oDiv[a-1].style.left;
for(var a = oDiv.length-1;a>0;a--){
oDiv[a].style.top = oDiv[a-1].offsetTop + "px";
oDiv[a].style.left = oDiv[a-1].offsetLeft + "px";
}
oDiv[0].style.top = oTop;
oDiv[0].style.left = oLeft;
} }
</script>
</head>
<body>
<h3>鼠标移进来试试</h3>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
JS-鼠标彩色拖尾小效果的更多相关文章
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- js实现音量拖拽的效果模拟
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js ...
- js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS鼠标的拖拽原理
拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...
- 浅谈canvas中的拖尾效果
引言 很早就想了解以下 canvas 中的拖尾效果(如彗星,烟花等效果)是怎么实现的,但是一直没有深入了解,正巧在 codepen 上看到一个 demo,代码简单,效果炫酷,故有此文. 什么黑科技 在 ...
- cocos2dx 以子弹飞行为例解说拖尾效果类CCMotionStreak
在游戏开发中,有时会须要在某个游戏对象上的运动轨迹上实现渐隐效果.比方子弹的运动轨迹,假设不借助引擎的帮助,这样的效果则须要通过大量的图片来实现.而Cocos2D-x的拖动渐隐效果类CCMotionS ...
- Cocos Creator 的实现拖尾效果
在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- [转自大神]js拖拽小总结
https://blog.csdn.net/u013040887/article/details/83059094 权侵删 这里写的是一个原生js实现拖拽的效果,首先: 1.实现拖拽的三大事件,是要首 ...
随机推荐
- 4G模块ME3760_V2 端口映射
/dev/ttyUSB0 ECM // ECM 口 /dev/ttyUSB1 / //ECM口 /dev/ttyUSB2 AT ...
- java-过滤器Filter_多个Filter的执行顺序
http://www.cnblogs.com/HigginCui/p/5772514.html [Filter链] *在一个web应用中,可以开发编写多个Filter,这些Filter组合起来称为一个 ...
- Arraylist静态初始化
new ArrayList<String>(Arrays.asList("ab","cd","ef"));
- 防火墙导致MySQL无法访问的问题解决案例
问题 数据库总是访问不了以致不得不反反复复的重启MySQL数据库. 但是重启的效果并不明显,重启10几分钟后问题依然出现.导致前端用户难以正常访问网站.另外他们还通过google,百度搜索,怀疑是数据 ...
- c++中的前向声明
整理于: http://blog.csdn.net/heyutao007/article/details/6649741 http://blog.sina.com.cn/s/blog_68d90fdb ...
- 【复杂】CentOS 6.4下PXE+Kickstart无人值守安装操作系统
一.简介 1.1 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持 ...
- endl的读法
endl是“end line”的缩写,所以它应该念作“endELL”而不是“endONE”.
- CentOS7忘记root密码的解决方法
开机启动centos 7.0,看到如下画面,选择下图选单,按"e"键 在下图linux16行中,将ro这两个字母修改为rw init=/sysroot/bin/sh 修改结果如下图 ...
- 让Flask-admin支持markdown编辑器
前言 flask-admin 算是一个很不错的 flask 后台管理了,用它来做博客系统的管理后端再合适不过了,节约时间成本,避免重复造轮子,但是作为一个程序员,写文章怎么可以没有 markdown ...
- ORACLE expdp/impdp导出实例
服务器上以sys或system超级管理员登录. SQL>create directory expdp_dir as '/home/oracle/dmpdata';(dmpdata 需要建立.赋予 ...