jQuery操作背景颜色渐变动画效果-js教程-PHP中文网

首页

web前端

js教程

jQuery操作背景颜色渐变动画效果

php中世界最好的语言

Apr 19, 2018 pm 04:28 PM

jquery 渐变颜色

这次给大家带来jQuery操作背景颜色渐变动画效果，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>
<p style="width: 600px; height: 200px; border: 1px solid red;" id="asd">
  脚本之家欢迎各位光临--http://www.jb51.net
</p>
</body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

WPS文档表格颜色怎么设置你知道吗 Mar 20, 2024 am 08:19 AM

我们在看到别人的WPS文档中表格颜色做出来的效果五颜六色，十分美观；而自己只有单调的黑色。如果过给表格填充颜色，我相信很多同学都会。但是，如果要在WPS文档中国设置表格的颜色的话，肯定有不少同学会觉得烧脑！今天，我们来学习一下关于如何设置WPS文档表格的颜色。我整理了一份文档，希望对大家有所帮助。步骤如下：1、我们需要在WPS文档中绘制一个表格，在要修改线条颜色的表格中点击鼠标右键。2、接着，用鼠标在表格上点击【鼠标右键】；在弹出的菜单中，我们找到【边框和底纹】。3、此时，会打开【边框和底纹】对

vivo全新X100系列内存、颜色曝光：全系12+256GB起步 May 06, 2024 pm 03:58 PM

5月6日消息，今天vivo官方宣布，全新的vivoX100系列将在5月13日19:00正式发布。据了解，此次发布会预计将发布vivoX100s、vivoX100sPro、vivoX100Ultra三款机型，以及vivo自研影像品牌BlueImage蓝图影像技术。数码博主“数码闲聊站”今天也放出了这三款机型的官方渲染图、内存规格及配色等，其中X100s采用了直屏设计，而X100sPro和X100Ultra则是曲屏设计。该博主透露，vivoX100s共有黑、钛、青、白四种配色，内存规格

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

ps渐变工具怎么用-ps渐变工具的使用方法 Mar 05, 2024 pm 06:28 PM

ps软件是很多人办公中会使用到的软件，那么各位知道ps渐变工具怎么用吗?下文就是小编为各位带来的ps渐变工具的使用方法，感兴趣的用户快来下文看看吧。1.打开或创建一个新的文档：首先，打开Photoshop软件并创建一个新的文档，或者打开已有的图像文件。选取渐变工具：在工具栏的左侧，定位渐变工具（位于矩形选框工具和油漆桶工具之间），然后点击以选中。3.设置渐变类型：在工具选项栏中，你可以选择不同的渐变类型。有线性渐变、径向渐变、角度渐变等选项可供选择。点击渐变类型下拉菜单，选择你想要的渐变类型。4

如何判断jQuery元素是否具有特定属性？ Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属

See all articles

jQuery操作背景颜色渐变动画效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题