Question

我一直在尝试使用JavaScript动画.png文件，同时遵循this方法。这是我想要动画的.png file。我想通过“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;
}

修改

再次尝试，但是第二种方法列出了here，但仍然没有。这些是我目前的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 个答案: