透过JS控制CSS实现连帧动画-HTML教程-爱易网页

透过JS控制CSS实现连帧动画

日期：2014-05-17　浏览次数：20601 次

通过JS控制CSS实现连帧动画

网页类Web游戏开发中常常需要实现连帧的动画效果，但是又不方便通过GIF图片去替代，比如动物的移动就是一种。

下面代码是一个简单的连帧动画的Demo。

<html>
    <head>
        <meta charset="UTF-8">
        <title>动画demo</title>
        <style type="text/css" rel="stylesheet">
            body div{
                    background-image:url(image/donghua.png); background-repeat:no-repeat}
            .step1{background-position:0px 0px;}
            .step2{background-position:-111px 0px;}
            .step3{background-position:-222px 0px;}
            .step4{background-position:-333px 0px;}
            .step5{background-position:-444px 0px;}
            .step6{background-position:-555px 0px;}
            .step7{background-position:-666px 0px;}
            .step8{background-position:-777px 0px;}
        </style>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            var n=0;
            //持续设置图片旋转角度，使其显示旋转动画
            setInterval(function(){ 
                $("#donghua").css({"position":"relative","left":-n+"px","background-position":n+"px 0px"});
                n=(n<1000)?n-111:-111;
            },300);
        </script>
    </head>
    <body style="background-color:black;">
        <div class="step1" style="width:111px;height:57px;"></div>
        <div class="step2" style="width:111px;height:57px;"></div>
        <div class="step3" style="width:111px;height:57px;"></div>
        <div class="step4" style="width:111px;height:57px;"></div>
        <div class="step5" style="width:111px;height:57px;"></div>
        <div class="step6" style="width:111px;height:57px;"></div>
        <div class="step7" style="width:111px;height:57px;"></div>
        <div class="step8" style="width:111px;height:57px;"></div>
        <hr color="red">
        <div id="donghua" style="width:111px;height:57px;">
        </div>
    </body>
</html>

最终效果如图所示：

1楼lidaasky1小时前: 不错，学习了

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

透过JS控制CSS实现连帧动画

相关资料更多>

推荐阅读更多>