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标签并且要添加的数字例如是73px而不是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);
});

The proof is in the fiddle.

如果您要修改多个CSS属性，则需要使用地图或.CSS示例页面上列出的其他一些方法：http://api.jquery.com/css/

哦，作为附注，从未明确检测过这样的浏览器。你想做功能检测，因为我打赌你的代码会破坏IE9，假设IE9现在处理的背景定位与IE8不同。 http://www.jibbering.com/faq/notes/detect-browser/

自动精灵计算 - CSS3或Jquery？

1 个答案: