JS实现的颜色实时渐变效果完整实例


Posted in Javascript onMarch 25, 2016

本文实例讲述了JS实现的颜色实时渐变效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div id="div1" style="font-size:36px;">我的闪烁文字 abc123</div>
<span id="span1"></span>
<script type="text/javascript">
var begin = getRGB('#33FFAA');
var end = getRGB('#FF0000');
var curColor = getRGB('#33FFAA');
var bo = true;
var rate = getRate(begin, end);
function blink()
{
 window.setInterval(function(){
  curColor.r = getCur(begin.r, end.r, curColor.r, bo, rate.r);
  curColor.g = getCur(begin.g, end.g, curColor.g, bo, rate.g);
  curColor.b = getCur(begin.b, end.b, curColor.b, bo, rate.b);
  document.getElementById('div1').style.color = getColor(curColor);
  document.getElementById('span1').innerHTML = getColor(curColor);
  if(curColor.r == begin.r && curColor.g == begin.g && curColor.b == begin.b)
  {
   bo = true;
  }
  if(curColor.r == end.r && curColor.g == end.g && curColor.b == end.b)
  {
   bo = false;
  }
 } , 100);
}
function getCur(beginValue, endValue, curValue, bo, rateValue)
{
 if(beginValue == endValue)
 {
  return beginValue;
 }
 rateValue = beginValue < endValue ? rateValue : -rateValue;
 curValue += bo ? rateValue : -rateValue;
 if(curValue < Math.min(beginValue, endValue))
 {
  curValue = Math.min(beginValue, endValue);
 }
 if(curValue > Math.max(beginValue, endValue))
 {
  curValue = Math.max(beginValue, endValue);
 }
 return curValue;
}
function getRate(b, e)
{
 var obj = new Object();
 obj.r = Math.abs(b.r - e.r) / 5;
 obj.g = Math.abs(b.g - e.g) / 5;
 obj.b = Math.abs(b.b - e.b) / 5;
 return obj;
}
function getRGB(color)
{
 var obj = new Object();
 obj.r = parseInt(color.substr(1,2), 16);
 obj.g = parseInt(color.substr(3,2), 16);
 obj.b = parseInt(color.substr(5,2), 16);
 return obj;
}
function getColor(obj)
{
 obj.r = Math.round(obj.r);
 obj.g = Math.round(obj.g);
 obj.b = Math.round(obj.b);
 var color = '#';
 color += (obj.r < 16 ? '0':'') + obj.r.toString(16);
 color += (obj.g < 16 ? '0':'') + obj.g.toString(16);
 color += (obj.b < 16 ? '0':'') + obj.b.toString(16);
 return color;
}
blink();
</script>
</body>
</html>
Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 #Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 #Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 #Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 #Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 #Javascript
详解Javascript继承的实现
Mar 25 #Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 #Javascript
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
重命名批处理python脚本
2013/04/05 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
详解爬虫被封的问题
2019/04/23 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python通过socketserver处理多个链接
2020/03/18 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
财务会计毕业生个人求职信
2014/02/03 职场文书
工作推荐信范文
2014/05/10 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书