Question

在桌面上的任何网络浏览器中尝试以下链接，然后在任何移动浏览器上尝试（在Android，iPhone和iPad上试用 - 都会产生同样的问题），有人可以告诉我为什么第一个'框架'（好的原始精灵位置）总是显示在动画后面？

http://24hours-in.lincoln.ac.uk/projects/mus/animate2.html

谢谢！

Answer 1

解决了！（带软糖）

var character = null; 
var xOffset = 0;

function animate() {
    if(xOffset < 360){
        xOffset += 30;
    } else {
        xOffset = 0;
    }
    character = document.getElementById("character");
    character.style.backgroundImage = "url('char2.png')";
    character.style.backgroundPosition = xOffset + "px 0px";
    setTimeout(animate,250);
}

function init() {
    var character = document.createElement("div");
    character.id = "character";
    character.style.backgroundImage = "url('spacer.png')";
    character.style.position = "absolute";
    character.style.width = "30px";
    character.style.height = "65px";
    document.getElementById("stage").appendChild(character);
    animate();
}

window.onload = init;

我认为由于透明度，它使用的是原始图像的背景后退。因此，我不是从背景图像开始，而是开始使用1px透明PNG文件（将其余的CSS准备好用于char PNG），当涉及到动画时，我将背景图像替换为char.PNG版本。

我确信有更优雅的方式，但这可以胜任！

Answer 2

你知道，说实话，我不知道导致了什么问题，但问题是character背景图片是静态的 - 也就是说，它是石头（通过css）。

解决您的问题是使用javascript动态添加背景图片。这是您修改后的代码。

<强> CSS

<style type="text/css">
body {
    padding: 0px;
    margin: 0px;
}

#character {
    position:absolute;
    width:30px;
    height:65px;
    background-position: center center;
    overflow: hidden;
}
</style>

<强>的Javascript

<script type="text/javascript">

var character = null; 
var xOffset = 0;

function animate() {
    if(xOffset < 360){
        xOffset += 30;
    } else {
        xOffset = 0;
    }
    character.style.backgroundImage = "url('char.png')";
    character.style.backgroundPosition = xOffset + 'px, 0px';
    setTimeout(animate,250);
}

function init() {
    character = document.getElementById("character");
    animate();
}

window.onload = init;

</script>

<强> HTML

<body>
<div id="character"></div>
</body>

移动浏览器上的CSS Sprite动画问题（残留图像）

2 个答案: