自动精灵计算- CSS3还是Jquery？

Question

我用图像精灵作为我的画廊。为了在正确的地方获得正确的背景图像，我使用以下方法：

<style>
#container div:nth-child(1){background-position:0 0}
#container div:nth-child(2){background-position:200px 0}
#container div:nth-child(3){background-position:400px 0}
#container div:nth-child(4){background-position:600px 0}
#container div:nth-child(5){background-position:800px 0}
#container div:nth-child(6){background-position:1000px 0}
</style>

当有许多div标记时，以及当要添加的数字是73 to而不是200时，计算所有背景值是一种耗时的做法。此外，它占用了大量的css代码。

我可以用另一种方式使用CSS3?实现同样的结果吗？

否则，我想知道是否有人可以查看我的jquery脚本，看看是否有更好的方法(脚本工作)：

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function() {
$("#container div:first-child").fadeIn(400, showNext);
});

function showNext() {
var test1 = $(this).index(),
test2 = test1*200;

if (navigator.appName=='Microsoft Internet Explorer'){
$(this).css('backgroundPositionX', -test2);
}
else{
$(this).css('backgroundPosition', -test2);
}

$(this).next().fadeIn(400, showNext);
}
</script>

Answer 1

我没有要处理的背景图像，但下面是一个使用传递给CSS的函数来修改元素高度的示例。您想要做的只是将height属性与您的backgroundPosition属性交换，并将返回值切换为负值。

这将大大减少您的代码。

$(function() {
    $("#container div").css('height', function(i, oldValue) {
        return (i+1)*200;
    }).fadeIn(400);
});

如果要修改多个CSS属性，则需要使用.CSS示例页上概述的映射或其他一些方法：http://api.jquery.com/css/

哦，顺便提一句，从来没有明确地检测到这样的浏览器。您希望进行特性检测，因为我敢打赌您的代码会破坏IE9，假设IE9现在处理背景位置的方式与IE8不同。http://www.jibbering.com/faq/notes/detect-browser/