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

我一直在嘗試使用JavaScript爲動畫製作.png文件，同時遵循this方法。這是我想要動畫的.png file。我希望動畫標識能夠通過「地震」正確顯示，但標識甚至沒有出現，更不用說動畫了。但是，將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; 
}

編輯：

又試了一次，但與第二種方法上市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感謝您的代碼。這是完美的。 – 2012-03-05 02:57:04

它確實......但是，我**我做錯了什麼......：\ – Nyanja 2012-03-05 02:57:53

好吧，我只是堅持，而不是，謝謝。 @John Riselvato – Nyanja 2012-03-05 02:58:39

我相信 '跨度' 標籤是一個內聯元素，它需要一個'display：block'屬性或'float：left'，我試過你的代碼，它在我添加'displ後對我有用ay：block'到'span'標籤，並加入'logoCquake'級別。希望這可以幫助你。

注：如果您使用「顯示：塊」跨度將移動到新的生產線，如果你使用「浮動：左」的「跨度」標籤將移動到文本的左側。

來源

2012-03-05 11:20:47 Sushil

我明白了，非常感謝。 :) – Nyanja 2012-03-06 11:41:17

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

回答

相關問題