Очень интересно создавать то, что обычно делается на flash, используя только CSS и jQuery. В этом уроке мы таким образом создадим поворачивающийся рекламный шит. Мы будем использовать изображения, CSS и jQuery, чтобы создать поворачивающийся рекламный щит с двумя рекламными изображениями. Основная задача, — чтобы один набор фрагментов изображения исчезал, пока другой набор с другим рекламным изображением появлялся. Мы уменьшим ширину каждого исчезающего фрагмента и увеличим ширину каждого появляющегося. Это создаст эффект поворота фрагментов, совсем как у настоящего рекламного щита.

Демонстрация работы – Скачать исходный код

Давайте начнем с кода.

HTML

У нас будет довольно много разметки для фрагментов изображения, для каждого рекламного изображения будет использоваться 22 фрагмента:

<div>

    <div>

        <div id="ad_1">

            <img src="ads/ad1_slice01.jpg"/>

            <img src="ads/ad1_slice02.jpg"/>

            <img src="ads/ad1_slice03.jpg"/>

            <img src="ads/ad1_slice04.jpg"/>

            <img src="ads/ad1_slice05.jpg"/>

            <img src="ads/ad1_slice06.jpg"/>

            <img src="ads/ad1_slice07.jpg"/>

            <img src="ads/ad1_slice08.jpg"/>

            <img src="ads/ad1_slice09.jpg"/>

            <img src="ads/ad1_slice10.jpg"/>

            <img src="ads/ad1_slice11.jpg"/>

            <img src="ads/ad1_slice12.jpg"/>

            <img src="ads/ad1_slice13.jpg"/>

            <img src="ads/ad1_slice14.jpg"/>

            <img src="ads/ad1_slice15.jpg"/>

            <img src="ads/ad1_slice16.jpg"/>

            <img src="ads/ad1_slice17.jpg"/>

            <img src="ads/ad1_slice18.jpg"/>

            <img src="ads/ad1_slice19.jpg"/>

            <img src="ads/ad1_slice20.jpg"/>

            <img src="ads/ad1_slice21.jpg"/>

            <img src="ads/ad1_slice22.jpg"/>

        </div>

        <div id="ad_2">

            <img src="ads/ad2_slice01.jpg"/>

            <img src="ads/ad2_slice02.jpg"/>

            <img src="ads/ad2_slice03.jpg"/>

            <img src="ads/ad2_slice04.jpg"/>

            <img src="ads/ad2_slice05.jpg"/>

            <img src="ads/ad2_slice06.jpg"/>

            <img src="ads/ad2_slice07.jpg"/>

            <img src="ads/ad2_slice08.jpg"/>

            <img src="ads/ad2_slice09.jpg"/>

            <img src="ads/ad2_slice10.jpg"/>

            <img src="ads/ad2_slice11.jpg"/>

            <img src="ads/ad2_slice12.jpg"/>

            <img src="ads/ad2_slice13.jpg"/>

            <img src="ads/ad2_slice14.jpg"/>

            <img src="ads/ad2_slice15.jpg"/>

            <img src="ads/ad2_slice16.jpg"/>

            <img src="ads/ad2_slice17.jpg"/>

            <img src="ads/ad2_slice18.jpg"/>

            <img src="ads/ad2_slice19.jpg"/>

            <img src="ads/ad2_slice20.jpg"/>

            <img src="ads/ad2_slice21.jpg"/>

            <img src="ads/ad2_slice22.jpg"/>

        </div>

    </div>

</div>
<div></div>

Для этих изображений были созданы 22 фрагмента, каждый по 35 пикселей в ширину, из изображения шириной 770 пикселей и высотой 340 пикселей. Можно подумать, что это — много работы и что можно было взять целое изображение и создать блоки, действующие как фрагменты с правильно выбранным положением фонового изображения. Но тогда мы бы не смогли создать такой эффект поворачивающегося фрагмента, по крайней мере не с помощью JavaScript, который мы создали для этого урока.

У рекламного щита будет блок с абсолютным позиционированием с изображением рекламного щита. Так как у изображения есть прозрачные области, мы хотим наложить его на блок рекламы.

CSS

Стили для рамки рекламного щита будут такими:

.billboard{

    position:absolute;

    bottom:0px;

    left:50%;

    margin-left:-447px;

    width:916px;

    height:599px;

    background:transparent url(../images/billboard.png) no-repeat 0px 0px;
}

Чтобы элемент находился в центре страницы, мы задаем значение левого параметра равным 50% и значение левого внешнего отступа равным отрицательному значению половины элемента.

Контейнер для этих рекламных изображений будет иметь такой же стиль, как и рекламный шит, кроме фонового изображения. Мы так делаем, так как нам нужно, чтобы содержащиеся элементы находились там же, где и рекламный щит. Мы не хотим размещать рекламные изображения внутри рекламного щита, так как рекламный щит должен был поверх них. Так что мы создаем другой элемент с таким же расположением:

.container{

    position:absolute;

    bottom:0px;

    left:50%;

    margin-left:-447px;

    width:916px;

    height:599px;

}

.ad{

    width:800px;

    height:336px;

    position:relative;

    margin:35px 0px 0px 60px;

    background-color:#333;

}

.ad_1 img{

    width:35px;

    height:336px;

    position:absolute;   

}

.ad_2 img{

    width:0px;

    height:336px;

    margin-left:18px;

    position:absolute;
}

Фрагменты рекламного изображения будут шириной 35 пикселей. Фрагменты второго рекламного изображения будут той же ширины, но изначально мы зададим им значение ширины равное 0. Нам так же нужно задать значение левого отступа вторым фрагментам равное 18 пикселям, так как мы хотим создать эффект поворота. Мы расскажем об этом значении подробнее после того, как мы определим стили для фрагментов.

Расположение должно быть установлено для каждого фрагмента по отдельности:

.slice_1{left:0px;}

.slice_2{left:36px;}

.slice_3{left:72px;}

.slice_4{left:108px;}

.slice_5{left:144px;}

.slice_6{left:180px;}

.slice_7{left:216px;}

.slice_8{left:252px;}

.slice_9{left:288px;}

.slice_10{left:324px;}

.slice_11{left:360px;}

.slice_12{left:396px;}

.slice_13{left:432px;}

.slice_14{left:468px;}

.slice_15{left:504px;}

.slice_16{left:540px;}

.slice_17{left:576px;}

.slice_18{left:612px;}

.slice_19{left:648px;}

.slice_20{left:684px;}

.slice_21{left:720px;}
.slice_22{left:756px;}

Располагая элементы на один пиксель левее их реальной ширины, мы создаем небольшой промежуток между ними. Теперь значение левого внешнего отступа равно 18 пикселям, так как это половина ширины фрагмента плюс его промежуток. Мы задаем это значение, так как мы хотим, чтобы фрагменты появлялись или исчезали от их центра, а не от краев. Если мы просто назначим значение ширины фрагмента равным 0 пикселей, изображение не будет выглядеть поворачивающимся.

И это все, что касается CSS. Для дополнительных необычных фоновых изображений можете посмотреть скачиваемую версию по ссылке внизу.

Давайте создадим эффект поворота с помощью jQuery.

JavaScript

Теперь мы создадим функцию для поворота фрагментов. Эта функция заставит фрагменты первого рекламного изображения исчезать, устанавливая значение их ширины равным 0 пикселей. Чтобы получить эффект поворота, мы добавим левый внешний отступ 18 пикселей.

Пока фрагменты первого рекламного изображения исчезают, мы заставим другие фрагменты появляться, удаляя левый внешний отступ, равный 18 пикселям, который мы изначально задали в CSS, и задавая им значение ширины, равное 35 пикселям. Мы вызовем функцию поворота таким образом:

$('#ad_1 > img').each(function(i,e){

       rotate($(this),500,3000,i);
   });

Целиком вызываемый нами скрипт будет выглядеть так:

$(function() {

    $('#ad_1 > img').each(function(i,e){

        rotate($(this),500,3000,i);

    });

    function rotate(elem1,speed,timeout,i){

        elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){

            var other;

            if(elem1.parent().attr('id') == 'ad_1')

                other = $('#ad_2').children('img').eq(i);

            else

                other = $('#ad_1').children('img').eq(i);

                other.animate({'marginLeft':'0px','width':'35px'},

                                  speed,function(){

                var f = function() { rotate(other,speed,timeout,i) };

                setTimeout(f,timeout);

            });

        });

    }
});

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

Два значения временных интервалов, которые используются в функции поворота для задания скорости поворота (speed – скорость) и интервала между сменами рекламных изображений (timeout – задержка), задаются в миллисекундах.

И это все! Надеемся, Вам понравился этот урок!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Создаем меню со случайным поворотом пунктов с помощью jQuery и CSS3 
• Создание выезжающих блоков связанных сообщений с помощью jQuery и CSS3
• Эффект размытия с помощью CSS3 и jQuery