0

我有两个图像的精灵，一个位置是 0 0，另一个是 0 -150 px。我想让它们每 10 秒更改一次。我对 JavaScript 有点熟悉，到目前为止，我有这个：

function changeBackground () {
// some for loop? //

}
setInterval(function(){changeBackground()},10000);

对不起，这真的只是几行，但我真的迷路了。一点提示将不胜感激。

4

4 回答 4

0

这就是我的意思...

要支持其他浏览器，您需要添加其他前缀。（这适用于 chrome 和 safari）

不需要javascript .. .尤其是没有计时器。

在本例中，您的图像是“sprite.png”宽度 300px 高度 150px

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
 width:150px;height:150px;
 background:url(sprite.png) no-repeat 0px 0px;
 -webkit-animation:mymove 10s infinite;
}
@-webkit-keyframes mymove{
0%{background-position:0px 0px;}
50%{background-position:0px 0px;}
51%{background-position:-150px 0px;}
100%{background-position:-150px 0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

不使用 javascript 计时器的另一种方法......是在转换结束时更改类。

所以每次转换有 2 节课持续 10 秒。最后它会交换班级。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
 width:150px;height:150px;
 background:url(sprite.png) no-repeat 0px 0px;
 -webkit-transition:background-position 0s linear 10s;
}
div.odd{
 background-position:-150px 0px;
}
</style>
</head>
<script>
window.onload=function(){
 var div=document.getElementsByTagName('div')[0];
 div.addEventListener('transitionend',function(){
  this.classList.toggle('odd');
 },false);
 div.classList.toggle('odd');// start the transition
}
</script>
<body>
<div></div>
</body>
</html>
于 2013-07-09T08:06:18.770 回答
0

像这样的东西。这是未经测试的，所以可能会有一些错误，但你可以像这样解决它：

<div id="sprite"></div>

setBackgroundImage(frameNumber) {
    var style = document.getElementById('sprite').style;
    var pos;

    if (frameNumber === 0) {
        pos = 0;
    } else if (frameNumber === 1) {
        pos = -150;
    }

    style.backgroundPositionX = pos;
}

var currentFrame = 0;
function changeBackground () {
    currentFrame ++;
    currentFrame = currentFrame % 2;
    setBackgroundImage
}

setInterval(function(){changeBackground()},10000);
于 2013-07-09T07:52:46.913 回答
0

如果您需要动画，也许这对您有帮助，请评论http://jsfiddle.net/hmZ7W/

var button = document.getElementById("button");
var oddEven = 1;
function changeBackground () {
    if(oddEven)
    {
        button.style.backgroundPosition = "0 150px";
        oddEven = 0;
    }
    else
    {
        button.style.backgroundPosition = "0 0";
        oddEven = 1;    
    }

}
setInterval(function(){changeBackground()},500);
于 2013-07-09T07:52:54.213 回答
0

您可以在 JS 中尝试使用此代码制作动画：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        #sprite {
            width: 100px;
            height: 100px;              
            background: url(image.jpg) 0 0;
        }
    </style>
</head>
<body onload="main();">
    <script>

    var pos = [-10, -20, -30]; // image offset
    var posIdx = 0; // offset index

    function main() {
        var img = document.createElement('img')
        img.id = 'sprite';
        document.body.appendChild(img);

        setInterval(function() {
            anim(img);
        }, 1000);
    }

    function anim(el) {
        posIdx++;
        if (posIdx > pos.length - 1) posIdx = 0;
        el.style.backgroundPositionX = pos[posIdx] + 'px';
    }

    </script>
</body>

于 2013-07-09T07:53:43.807 回答