具有JavaScript和CSS的動畫圖像（例如非GIF）？

Question

按照這種方法，我一直試圖用JavaScript制作.png文件的動畫。 這是我要設置動畫的.png文件。 我希望動畫徽標在“ Cupquake”中正確顯示，但是徽標甚至沒有顯示出來，更不用說動畫了。 但是，將HTML中的“ span class = logoCquake”更改為div類會顯示徽標，但徽標在文本下方。

我的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'))

我的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文件：

@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;
}

編輯：

再次嘗試，但是使用此處列出的第二種方法，仍然沒有任何反應。 這些是我當前的HTML和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：

<!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

我的代碼似乎正常工作：

<!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

我相信'span'標簽是一個內聯元素，它需要'display：block'屬性或'float：left'，我嘗試了您的代碼，並在將'display：block'添加到'span'標簽后為我工作類為“ logoCquake”。 希望這對您有所幫助。

注意：如果使用'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