ARO

Красивый рекламный щит при помощи JQuery и CSS

3 сообщения в этой теме


У нас будет довольно много разметки для фрагментов изображения, для каждого рекламного изображения будет использоваться 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%;    ;    width:916px;    height:599px;    background:transparent url(../images/billboard.png) no-repeat 0px 0px;}
Чтобы элемент находился в центре страницы, мы задаем значение левого параметра равным 50% и значение левого внешнего отступа равным отрицательному значению половины элемента.
Контейнер для этих рекламных изображений будет иметь такой же стиль, как и рекламный шит, кроме фонового изображения. Мы так делаем, так как нам нужно, чтобы содержащиеся элементы находились там же, где и рекламный щит. Мы не хотим размещать рекламные изображения внутри рекламного щита, так как рекламный щит должен был поверх них. Так что мы создаем другой элемент с таким же расположением:
.container{    position:absolute;    bottom:0px;    left:50%;    ;    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 – задержка), задаются в миллисекундах.
 
 
1 пользователю понравилось это

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зареєструвати аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу

Яндекс.Метрика Рейтинг@Mail.ru Индекс цитирования