Question

我有一个两个图像的精灵，一个位置是0 0，另一个是0 -150像素。我想让它们每10秒换一次。我对JavaScript很熟悉，到目前为止我已经有了这样：

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

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

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

Answer 1

像这样的东西。这是未经测试的，因此可能存在一些错误，但您可以这样解决：

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

Answer 2

如果你需要动画，也许这对你有所帮助请评论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);

Answer 3

您可以在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>

Answer 4

这就是我的意思......

支持您需要添加其他前缀的其他浏览器。（这适用于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>

用for循环改变精灵图像

4 个答案: