利用样式表style实现会转动的按钮动画

最新推荐文章于 2024-05-21 14:15:14 发布

danning

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.4k

点赞数

文章标签： animation function button each properties javascript

本文链接：https://blog.csdn.net/danning/article/details/652769

版权

说明：参考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>

danning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用样式表style实现会转动的按钮动画

说明：参考javacsript权威指南（第四版），书中没有具体例子，而且在IE不能实现。我修改了一下，在style属性中加了position:absolute, 因为书中要传入函数，所以写成：position:function(f,t) {return absolute;} New Document /** * AnimateCSS.js: * This file defines
复制链接

扫一扫