Javacript实现颜色梯度变化和渐变的效果代码


Posted in Javascript onMay 31, 2013

对于本站的导航栏,想做点什么。所以,选择了用js对导航栏的颜色做了梯度的变化处理。
起初,觉得用opacity属性(透明度)来改变颜色的梯度变化。不过,这样会出现一个问题。
每一个导航标签用的是[li],当鼠标浮动到标签上时,通过onmouseover()立即改变[li]的className,并用setInterval()来使其opacity(透明度)由0变到1.不过,当鼠标离开时,对于[li]标签的颜色恢复的处理貌似麻烦了许多。所以,很快就放弃了这个做法,换种思路。

到百度上一搜,看到了一篇很好的文章,地址为http://www.cnblogs.com/cloudgamer/archive/
2009/03/11/color.html。随之,进行了简化,找到了解决的办法。

不如首先通过两个颜色值,比如"#FFFFFF"、"#CCCCCC",其中一个为起始颜色,另一个为终止颜色。通过处理,获取两种颜色在变化时的各种颜色字符串,并且字符串的个数,即获取的频率可以调节。返回给某个数组变量,代码如下:

/** 
* @Desc 该文件是改变颜色梯度的库 - colorGrad.js 
* @Author GenialX 
* @Date 2013.05.30 
* @QQ 2252065614 
* @URL http://www.ihuxu.com 
*/ /** 
* 改变颜色的入口函数 
* beginColor/endColor均为形如#FFFFFF的十六进制的字符串,rate为渐变的速度 
* @return colorArray数组 形如#FFFFFF的字符串数组 
* 调用格式 changeColor("#FFFFFF","#000000",100); 
*/ 
function getColorArray(bColor,eColor,r){ 
//过渡中的颜色值,比如#FFFFFF 
var curColor = new Object(); 
var beginColor = new Object(); 
var endColor = new Object(); 
var rate = new Object(); 
//得到每个rgb增长的方向。true代表增加,false代表减少 
var isTrue = new Object(); 
var colorArray = new Array(); 
var i = 0;//数组下标 
beginColor = getRGB(bColor);//改变成ogj类型 
endColor = getRGB(eColor);//改变成ogj类型 
curColor = getRGB(bColor); 
rate = getRate(beginColor,endColor,r); 
isTrue = getIsTrue(beginColor,endColor)
Javascript 相关文章推荐
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 #Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 #Javascript
js怎么终止程序return不行换jfslk
May 30 #Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 #Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 #Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
PHP导出Excel实例讲解
2016/01/24 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
js操作二级联动实现代码
2010/07/27 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
深入理解JavaScript 函数
2016/06/06 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python中的编码知识整理汇总
2016/01/26 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
详解python logging日志传输
2020/07/01 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
汽车队司机先进事迹材料
2014/02/01 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
长江七号观后感
2015/06/11 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python