带有JavaScript和CSS的动画图像（如非GIF）？_Javascript_Html_Css

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

javascript html css

带有JavaScript和CSS的动画图像（如非GIF）？,javascript,html,css,Javascript,Html,Css,我一直在尝试用JavaScript制作一个.png文件的动画，同时遵循这个方法。这是我想要制作动画的部分。我希望动画的标志是正确的“杯震”，但该标志甚至没有出现，更不用说动画。但是，将HTML中的“span class=logoCquake”更改为div类会显示徽标，但它位于文本下方。我的JavaScript文件： var scrollUp = (function () { var timerId; return function (height, times, element) {

我一直在尝试用JavaScript制作一个.png文件的动画，同时遵循这个方法。这是我想要制作动画的部分。我希望动画的标志是正确的“杯震”，但该标志甚至没有出现，更不用说动画。但是，将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>

编辑：

再试一次，但使用列出的第二种方法，仍然没有结果。以下是我当前的HTML和JS代码：

JS:

HTML:


丘比特之家
忍者杯震

我的代码似乎有效：

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


div{背景：url(http://i1243.photobucket.com/albums/gg555/Nyanja/logoCquake.png)；高度：33px；宽度：39px}
var i=0；
setInterval（function（）{i+=33.6；document.getElementById（“anim”）.style.backgroundPosition=“0px”+i+“px”}，100）

我相信“span”标记是一个内联元素，它需要一个“display:block”属性或“float:left”，我尝试了你的代码，在我用类“logoCquake”将“display:block”添加到“span”标记后，它对我有效。希望这对你有帮助

注意：如果使用“显示：块”，则跨距将移动到新行；如果使用“浮动：左”，“跨距”标记将移动到文本的左侧。

此处开始工作。我要说的是，按照威尔的方式去做，这样编码就少了很多+谢谢你的代码。太好了。好吧，我还是坚持下去，谢谢@约翰·里塞尔瓦托

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"
});

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

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