说明:参考javacsript权威指南(第四版),书中没有具体例子,而且在IE不能实现。
我修改了一下,在style属性中加了position:absolute, 因为书中要传入函数,所以写成:position:function(f,t) {return 'absolute';}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
* AnimateCSS.js:
* This file defines a function named animateCSS(), which serves as a framework
* for creating CSS-based animations. The arguments to this function are:
*
* element: 要产生动画的HTML元素
* numFrames: 动画中的总帧数
* timePerFrame: 显示每帧的毫秒数
* animation: 定义动画的对象,后面有它的说明
* whendone: 一个可选的函数,在动画结束时调用
* 如果设置了该函数,它的参数是element
*
* The animateCSS() function simply defines an animation framework. It is the
* properties of the animation object that specify the animation to be
* done. Each property should have the same name as a CSS style property. The
* value of each property must be a function that returns values for that
* style property. Each function is passed the frame number and the total
* amount of elapsed time, and it can use these to compute the style value it
* should return for that frame. For example, to animate an image so that it
* slides in from the upperleft, you might invoke animateCSS as follows:
*
* animateCSS(image, 25, 50, // Animate image for 25 frames of 50ms each
* { // Set top and left attributes for each frame as follows
* top: function(frame,time) { return frame*8 + "px"; },
* left: function(frame,time) { return frame*8 + "px"; }
* });
*
**/
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
var frame = 0; // 存储当前帧号
var time = 0; // 存储消耗的总时间
// Arrange to call displayNextFrame() every timePerFrame milliseconds.
// This will display each of the frames of the animation.
var intervalId = setInterval(displayNextFrame, timePerFrame);
// The call to animateCSS() returns now, but the line above ensures that
// the nested function defined below will be invoked once for each frame
// of the animation. Because this function is defined inside
// animateCSS(), it has access to the arguments and local variables of
// animateCSS() even though it is invoked after that function has returned!
function displayNextFrame() {
if (frame >= numFrames) { // First, see if we're done
clearInterval(intervalId); // If so, stop calling ourselves
if (whendone) whendone(element); // Invoke whendone function
return; // And we're finished
}
// Now loop through all properties defined in the animation object
for(var cssprop in animation) {
// For each property, call its animation function, passing the
// frame number and the elapsed time. Use the return value of the
// function as the new value of the corresponding style property
// of the specified element. Use try/catch to ignore any
// exceptions caused by bad return values.
try {
element.style[cssprop] = animation[cssprop](frame, time);
} catch(e) {}
}
frame++; // Increment the frame number
time += timePerFrame; // Increment the elapsed time
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="">
<!--在圆中医东一个按钮,然后改变它显示的文本
//button, 40帧 , 50ms
//下面的三角函数在(200,200)处定义了一个半径为100的圆
-->
<BR><BR><BR>
<INPUT TYPE="button" name="button" value="move" οnclick="animateCSS(document.forms[0].elements[1],400,50,
{
position:function(f,t) {return 'absolute';},
left:function(f,t){return 200+100*Math.cos(f/8)+'px';},
top:function(f,t){return 200+100*Math.sin(f/8)+'px';}
},
function(button){button.value='Done';});">
<div style="position:absolute"><INPUT TYPE="button" name="button2"></div>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
//animateCSS(document.getElementById("title"),40,50,
// {
//设置每个帧的top
// top:function(f,t) {return 300-f*5+"px";}
// clip:function(f,t) {return "rect(auto "+f*10+"px auto auto"; },
// }
// );
//-->
</SCRIPT>
</BODY>
</HTML>