Автоматический расчет спрайтов - CSS3 или Jquery? - PullRequest
Новая
       30

Автоматический расчет спрайтов - CSS3 или Jquery?

0 голосов
/ 23 мая 2011

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

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

1 Ответ

1 голос
/ 23 мая 2011

У меня не было фонового изображения для работы, но вот пример использования функции, переданной в 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/

...