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 相关文章推荐
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
npm ci命令的基本使用方法
Sep 20 Javascript
JavaScript 异步时序问题
Nov 20 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
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
微信支付开发告警通知实例
2016/07/12 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
中专毕业生自我鉴定
2013/11/21 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
超市开学活动方案
2014/03/01 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
给上级领导的感谢信
2015/01/22 职场文书
作弊检讨书范文
2015/05/06 职场文书
婚礼父母致辞
2015/07/28 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python