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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
vue之将echart封装为组件
Jun 02 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 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
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
js实现秒表计时器
2019/12/16 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
ipad上运行python的方法步骤
2019/10/12 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
安全生产检查通报
2014/01/29 职场文书
行政人事岗位职责
2014/03/17 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
省文明单位申报材料
2014/05/08 职场文书
画展邀请函
2015/01/31 职场文书
大学生创业计划书
2019/06/24 职场文书
开网店计划分析
2019/07/30 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android