Блог

Я использую спрайты изображений для своей галереи. Чтобы получить правильное фоновое изображение в нужном месте, я использую это:

 <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 пикселя вместо 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>
  

У меня не было фонового изображения для работы, но вот пример использования функции, переданной в CSS, для изменения высоты элемента. Что вы хотите сделать, это просто поменять height свойство на свое backgroundPosition и изменить возвращаемое значение на отрицательное.

Это должно существенно минимизировать ваш код.

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

Доказательство находится в скрипке.

Если вы хотите изменить более одного свойства CSS, вы захотите использовать map или некоторые другие методы, описанные на .Страница примера CSS:http://api.jquery.com/css

О, и в качестве дополнительного примечания, никогда явно не определяйте такой браузер. Вы хотите выполнить обнаружение функций, поскольку, бьюсь об заклад, ваш код нарушает IE9, предполагая, что IE9 обрабатывает фоновое позиционирование иначе, чем IE8. http://www.jibbering.com/faq/notes/detect-browser