JavaScript之动画3

给一个div添加颜色,使其产生渐变效果,我们设置index为变量,使用setInterval函数方法改变rgb颜色值。

window.onload = function(){
	            var boxDom = document.getElementById("box");
	            boxDom.style.width = "200px";
	            boxDom.style.height = "200px"
	            var index = 0;
	            setInterval(function(){
	                if(index ==255){
	                    index=0;
	                    boxDom.style.background = "rgb(255,255,255)";
	                }else{
			boxDom.style.background = "rgb("+index+","+index+","+index+")";
	                    index++;
	                }
	            },1000/30);
	        };

我们来直观效果图:

时间: 2024-10-10 17:16:06

JavaScript之动画3的相关文章

"Javascript高性能动画与页面渲染"笔记

前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗易懂.so……笔记诞生 1.fps -frame per second 帧 页面是每一帧变化都是系统绘制出来的(GPU或者CPU).但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,

Javascript高性能动画与页面渲染

转自:http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering No setTimeout, No setInterval 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精确的控制动画.但我认为至少在现在这个时间点,高级浏览器.甚至手机浏览器的普及程度足够让你有理由有条件在实现动画时使用更高效的方式. 什么是高效 页面是每一帧变

JavaScript实现动画插件

在这之前,大家应该了解了缓动函数(Easing Functions)的概念: 动画的每一帧需要计算一次元素样式,如果样式改变则需要重绘屏幕.细一点讲,当我们每调用一次计时器函数,需要通过向缓动函数传入一些动画上下文变量,从而获取到元素的某个样式在当前帧合理的值. 我所了解的缓动函数实现方式有两种,一种是tbcd方式(Robert Penner's Easing Functons) function(t,b,c,d){ return c*t/d + b; } t: timestamp 以毫秒(ms

JavaScript之动画2

在JavaScript动画中,我们调用setInterval函数(setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象),值得注意的是:setInterval它设置的时间间隔小于动画帧速(如每秒10帧,相当于100毫秒). 举个栗子: function show1(){ alert("每隔1秒显示一次"); } function show2(str){ alert(str); } setInterval(show1,1000); setInterval(

[转]Javascript高性能动画与页面渲染

No setTimeout, No setInterval 作者 李光毅 发布于 2014年4月30日 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精确的控制动画.但我认为至少在现在这个时间点,高级浏览器.甚至手机浏览器的普及程度足够让你有理由有条件在实现动画时使用更高效的方式. 什么是高效 页面是每一帧变化都是系统绘制出来的(GPU或者CPU).但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况

<JavaScript>自定义动画

animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 示例代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont

javascript图形动画设计--画简单正弦波

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Rotate to Mouse</title> <link rel="stylesheet" href="../include/style.css"> <style type="text/css"> .dot{ p

javascript图形动画设计--以简单正弦波轨迹移动

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Wave 1</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from &

JavaScript封装动画函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { margin-top: 10px; width: 100px; height: 50px; background-color: purple;