jQuery实现的背景颜色渐变动画效果示例


Posted in jQuery onMarch 24, 2017

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

完整实例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>背景颜色渐变</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="tggg()" />
<script>
  function tggg() {
    //$("#asd").css({ "background-color": "red" }).show().fadeOut(500);
    fadeColor(
    { r: 0, g: 255, b: 0 }, //star color
    {r: 255, g: 255, b: 255 }, //end color
    function (color) { document.getElementById("asd").style.backgroundColor = color; }, 1, 10);
  }
  //所有代码的执行时间只有24毫秒左右。
  function fadeColor(from, to, callback, duration, totalFrames) {
    //用一个函数来包裹setTimeout,根据帧数来确定延时
    function doTimeout(color, frame) {
      setTimeout(function () {
        try {
          callback(color);
        } catch (e) { JSLog.write(e); }
      }, (duration * 1000 / totalFrames) * frame);
      //总持续秒数/每秒帧数*当前帧数=延时(秒),再乘以1000作为延时(毫秒)
    }
    // 整个渐变过程的持续时间,默认为1秒
    var duration = duration || 1;
    // 总帧数,默认为持续秒数*15帧,也即每秒15帧
    var totalFrames = totalFrames || duration * 15; var r, g, b; var frame = 1;
    //在第0帧设置起始颜色
    doTimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')', 0);
    //计算每次变化所需要改变的rgb值
    while (frame < totalFrames + 1) {
      r = Math.ceil(from.r * ((totalFrames - frame) / totalFrames) + to.r * (frame / totalFrames));
      g = Math.ceil(from.g * ((totalFrames - frame) / totalFrames) + to.g * (frame / totalFrames));
      b = Math.ceil(from.b * ((totalFrames - frame) / totalFrames) + to.b * (frame / totalFrames));
      // 调用本frame的doTimeout
      doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame); frame++;
    }
  }
</script>
<div style="width: 600px; height: 200px; border: 1px solid red;" id="asd">
  三水点靠木欢迎各位光临--https://3water.com
</div>
</body>
</html>
jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 #jQuery
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
You might like
php文件操作之小型留言本实例
2015/06/20 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
js右键菜单效果代码
2007/07/21 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
js中的闭包学习心得
2018/02/06 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python算法表示概念扫盲教程
2017/04/13 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python  Django 母版和继承解析
2019/08/09 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
strstr()的简单实现
2013/09/26 面试题
毕业生自我鉴定
2013/11/05 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
结婚典礼证婚词
2014/01/11 职场文书
三年大学自我鉴定
2014/01/16 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
成都人事代理协议书
2014/10/25 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python