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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
关于JavaScript轮播图的实现
Nov 20 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时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP7变量处理机制修改
2021/03/09 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
公司户外活动总结
2014/07/04 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
村委会贫困证明范本
2014/09/17 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
Python基础知识之变量的详解
2021/04/14 Python
Python合并多张图片成PDF
2021/06/09 Python