JavaScriptとCSSを使用したアニメーションイメージ（非GIFなど）？

私はthisメソッドに従っている間に、JavaScriptで.pngファイルをアニメーション化しようとしていました。これはアニメーション化したい.png fileです。私は、アニメーションのロゴを "Cupquake"にしたいと思っていますが、ロゴは表示されません。しかし、HTMLの "span class = logoCquake"をdivクラスに変更すると、ロゴが表示されますが、テキストの下に表示されます。

私のJavaScriptファイル：JavaScriptとCSSを使用したアニメーションイメージ（非GIFなど）？

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

EDIT：

もう一度試しましたが、第2の方法が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>

出典

2012-03-04 Nyanja

私のコードは動作するようです：

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

出典

2012-03-05 01:05:58

http://jsfiddle.net/d9BhN/ここが機能しています。イード氏は、ウィルのやり方でコーディングがずっと少ないと言っています。 +1コードに感謝します。それは完璧だ。 –

それはしている...しかし、一体何が**私は間違っている...：\ – Nyanja

申し分なく、私はちょうど代わりに、それにこだわるよ、ありがとう。 @ジョンリゼルヴァート – Nyanja

私は 'スパン' タグを信じますインライン要素であるため、 'display：block'プロパティか 'float：left'のどちらかが必要です。あなたのコードを試してみましたが、 'displ ay：block 'をクラス' logoCquake 'の' span 'タグに追加します。これがあなたを助けることを願っています

注： 'display：block'を使用すると、スパンは新しい行に移動し、 'float：left'を使用すると、 'span'タグがテキストの左側に移動します。

出典

2012-03-05 11:20:47 Sushil

私は、ありがとう、非常に参照してください。 :) – Nyanja

JavaScriptとCSSを使用したアニメーションイメージ（非GIFなど）？

答えて

関連する問題