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 相关文章推荐
js 金额文本框实现代码
Feb 14 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
vue文件树组件使用详解
Mar 29 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
php实现的双向队列类实例
2014/09/24 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
学习Vue组件实例
2018/04/28 Javascript
回顾Javascript React基础
2019/06/15 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
解析Python编程中的包结构
2015/10/25 Python
Python requests模块实例用法
2019/02/11 Python
python之拟合的实现
2019/07/19 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
运动会口号16字
2014/06/07 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python