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实现字体颜色渐变效果的方法
Mar 29 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现日历效果
Sep 11 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生成局部唯一识别码LUID的代码
2012/10/06 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
详解vue后台系统登录态管理
2019/04/02 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python判断两个对象相等的原理
2017/12/12 Python
Python中property函数用法实例分析
2018/06/04 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
超市重阳节活动方案
2014/02/10 职场文书
产品销售计划书
2014/05/04 职场文书
班级口号大全
2014/06/09 职场文书
体育教师求职信
2014/06/30 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
护士工作失误检讨书
2014/09/14 职场文书
企业宣传语大全
2015/07/13 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js