Sprites图+JavaScript制作动画效果

来源：互联网发布：用sql列出同表上下级编辑：程序博客网时间：2024/05/29 19:38

闲逛Codepen时发现了一个利用Sprites图做动画效果的示例，大为所动，遂cope其图，自己实现一下。

整体思路很简单：加载大图之后，利用js不断改变background-position以实现动画效果。

ps1：只简单实现了动画效果，没有对首次加载图片的延时做处理，如果没看到动画，刷新一下页面就可以了

ps2：处理延时时采用的setTimeout，性能堪忧，待我找到更好的方式后再优化。

ps3：代码可直接复制运行。

<!doctype html><html>    <head>        <meta charset="utf-8">        <style type="text/css">            body {                background-color: #38393c;            }            .string {                position: absolute;                top: 5%;                left: 50%;                transform: translateX(-50%);                display: block;                width: 275px;                height: 600px;                background: url(http://spectrafishing.com/_ui/skin/img/spectra-wire-sprite.png) no-repeat 0px 0px transparent;            }        </style>    </head>    <body>        <div class="string"></div>        <script src="js/jquery-1.11.3.js"></script>        <script type="text/javascript">            $(function() {                var $ani = $('.string');                for (var j = 0; j < 5; j++) {                    for (var i = 0; i < 10; i++) {                        setAnimate(i, j, (j * 10 + i + 1) * 30);                    }                }                function setAnimate(i, j, time) {                    setTimeout(function() {                        $ani.css('background-position', -275 * i + 'px ' + -600 * j + 'px');                    }, time);                }            });        </script>    </body></html>

0 0