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 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
Angular2库初探
Mar 01 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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 return语句另类用法不止是在函数中
2014/09/17 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python如何调用外部系统命令
2019/08/07 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python怎么删除缓存文件
2020/07/19 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
职工代表大会主持词
2014/04/01 职场文书
预防传染病方案
2014/06/14 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js