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+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JQuery animate动画应用示例
May 14 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易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
创联软件面试题笔试题
2012/10/07 面试题
酒店个人求职信范文
2014/01/25 职场文书
投标保密承诺书
2014/05/19 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
创业计划书之面包店
2019/09/17 职场文书