具有JavaScript和CSS的动画图像（例如非GIF）？

Question

I had been trying to animate a .png file with JavaScript while following this method. 按照这种方法，我一直试图用JavaScript制作.png文件的动画。 This is the .png file that I want to animate. 这是我要设置动画的.png文件。 I want the animated logo to be right by "Cupquake," but the logo doesn't even show up, let alone animate. 我希望动画徽标在“ Cupquake”中正确显示，但是徽标甚至没有显示出来，更不用说动画了。 However, changing "span class=logoCquake" in HTML to a div class displays the logo, but it is below the text. 但是，将HTML中的“ span class = logoCquake”更改为div类会显示徽标，但徽标在文本下方。

My JavaScript file: 我的JavaScript文件：

var scrollUp = (function () {
  var timerId;

  return function (height, times, element) {
    var i = 0;
    timerId = setInterval(function () {
      if (i > times)
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px';
      i++;
    }, 100);
  };
})();

scrollUp(130, 30, document.getElementByClass('logoCquake'))

My HTML: 我的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../scripts/logoCquake.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cupquake - Home</title>
</head>

<body>
<div class="wrapper">
    <div class="header">
        <div class="topbar">
            <div class="mCquake">
            </div>
        </div>
        <br>
        <br>
        <br>
        <span class="ninja">Ninja</span><span class="cupquake">Cupquake</span><span class="logoCquake"></span>
    </div>
</div>
</body>
</html>

CSS file: CSS文件：

@font-face
{
    font-family: typo_semib;
    src: url('fonts/typo_semib.ttf');
}
@font-face
{
    font-family: typo_light;
    src: url('fonts/typo_light.ttf');
}
.wrapper .header
{
    height: 250px;
    width: 100%;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa200), color-stop(100%,#d25400));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200',endColorstr='#d25400',GradientType=0);
    background: -moz-linear-gradient(top,#ffa200,#d25400);
    background-image: -o-linear-gradient(#ffa200,#d25400);
    overflow: hidden;
}
.wrapper .header .topbar
{
    height: 60px;
    background-image: url(../imgz/head/hBarSBg.png);
    background-repeat: repeat-x;
}
.wrapper .header .topbar .mCquake
{
    height: 37px;
    width: 278px;
    background-image: url(../imgz/head/mCqRight.png);
    background-repeat: no-repeat;
    float: none;
    float: right !important;
    margin-right: 10px;
    margin-top: 11.5px;
    margin-bottom: 11.5px;
}
.wrapper .header .ninja
{
    font-family: typo_semib;
    font-size: 48px;
    color: #303030;
    margin-left: 55px;
}
.wrapper .header .cupquake
{
    font-family: typo_light;
    font-size: 48px;
    color: #303030;
}
.wrapper .header .logoCquake
{
    height: 112px;
    width: 130px;
    background-image: url(../imgz/logo/logoCquake.png);
    background-repeat: no-repeat;
}

EDIT: 编辑：

Tried again, but with the second method listed here , still nothing. 再次尝试，但是使用此处列出的第二种方法，仍然没有任何反应。 These are my current HTML and JS codes: 这些是我当前的HTML和JS代码：

JS: JS：

function SpriteAnim (options) {
  var timerId,
      i = 0,
      element = document.getElementByClass(options.elementClass);

  element.style.width = options.width + "px";
  element.style.height = options.height + "px";
  element.style.backgroundRepeat = "no-repeat";
  element.style.backgroundImage = "url(" + options.sprite + ")";

  timerId = setInterval(function () {
    if (i >= options.frames) {
      i = 0;
    }
    element.style.backgroundPosition = "0px -" + i * options.height + "px";
     i ++;
  }, 100);

  this.stopAnimation = function () {
    clearInterval(timerId);
  };
}

var cupcake = new SpriteAnim({
  width: 130,
  height: 112,
  frames: 30,
  sprite: "..\imgz\logo\logoCquake.png",
  elementClass : "logoCquake"
});

HTML: HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <script language="javascript" src="SpriteAnim.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cupquake - Home</title>
</head>

<body>
<div class="header">
    <div class="topbar">
        <div class="mCquake">
        </div>
    </div>
    <span class="ninja">Ninja </span><span class="cupquake">Cupquake</span><span class="logoCquake"></span>
</div>
</div>
</body>
</html>

Answer 1

my code seems to work: 我的代码似乎正常工作：

<!doctype html>
<style>
div{background:url(http://i1243.photobucket.com/albums/gg555/Nyanja/logoCquake.png);height:33px;width:39px}
</style>
<div id=anim></div>
<script>
var i=0;
setInterval(function(){i+=33.6;document.getElementById("anim").style.backgroundPosition="0px "+i+"px"},100)
</script>

Answer 2

I believe 'span' tag being an inline element it either needs a 'display: block' property or 'float: left', i tried your code and it worked for me after i added 'display: block' to the 'span' tag with class 'logoCquake'. 我相信'span'标签是一个内联元素，它需要'display：block'属性或'float：left'，我尝试了您的代码，并在将'display：block'添加到'span'标签后为我工作类为“ logoCquake”。 Hope this helps you. 希望这对您有所帮助。

Note: if you use 'display: block' the span will move to new line and if you use 'float: left' the 'span' tag will move to the left of the text. 注意：如果使用'display：block'，则跨度将移至新行；如果使用'float：left'，则'span'标记将移至文本左侧。

具有JavaScript和CSS的动画图像（例如非GIF）？

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-03-05 01:05:58

解决方案2
0 2012-03-05 11:20:47

具有JavaScript和CSS的动画图像（例如非GIF）？

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-03-05 01:05:58

解决方案2 0 2012-03-05 11:20:47

解决方案1
1 已采纳 2012-03-05 01:05:58

解决方案2
0 2012-03-05 11:20:47