Бормотухи.НЕТ

Вернуться   Бормотухи.НЕТ > Компьютеры > Программирование
Расширенный поиск

Программирование Все о программировании ....

Ответ
 
Опции темы Поиск в этой теме
Старый 02.01.2010, 14:31 Вверх   #1
Старший модератор
 
Аватар для Ghost
Ghost вне форума
Доп. информация
По умолчанию Создание "уличного бигборда" с помощью CSS и jQuery

HTML
У нас будет много частей одного большого изображения - по 22 части для каждой рекламы:
Код:
<div class="container">
<div class="ad">
<div id="ad_1" class="ad_1">
<img class="slice_1" src="ads/ad1_slice01.jpg"/>
<img class="slice_2" src="ads/ad1_slice02.jpg"/>
<img class="slice_3" src="ads/ad1_slice03.jpg"/>
<img class="slice_4" src="ads/ad1_slice04.jpg"/>
<img class="slice_5" src="ads/ad1_slice05.jpg"/>
<img class="slice_6" src="ads/ad1_slice06.jpg"/>
<img class="slice_7" src="ads/ad1_slice07.jpg"/>
<img class="slice_8" src="ads/ad1_slice08.jpg"/>
<img class="slice_9" src="ads/ad1_slice09.jpg"/>
<img class="slice_10" src="ads/ad1_slice10.jpg"/>
<img class="slice_11" src="ads/ad1_slice11.jpg"/>
<img class="slice_12" src="ads/ad1_slice12.jpg"/>
<img class="slice_13" src="ads/ad1_slice13.jpg"/>
<img class="slice_14" src="ads/ad1_slice14.jpg"/>
<img class="slice_15" src="ads/ad1_slice15.jpg"/>
<img class="slice_16" src="ads/ad1_slice16.jpg"/>
<img class="slice_17" src="ads/ad1_slice17.jpg"/>
<img class="slice_18" src="ads/ad1_slice18.jpg"/>
<img class="slice_19" src="ads/ad1_slice19.jpg"/>
<img class="slice_20" src="ads/ad1_slice20.jpg"/>
<img class="slice_21" src="ads/ad1_slice21.jpg"/>
<img class="slice_22" src="ads/ad1_slice22.jpg"/>
</div>
<div id="ad_2" class="ad_2">
<img class="slice_1" src="ads/ad2_slice01.jpg"/>
<img class="slice_2" src="ads/ad2_slice02.jpg"/>
<img class="slice_3" src="ads/ad2_slice03.jpg"/>
<img class="slice_4" src="ads/ad2_slice04.jpg"/>
<img class="slice_5" src="ads/ad2_slice05.jpg"/>
<img class="slice_6" src="ads/ad2_slice06.jpg"/>
<img class="slice_7" src="ads/ad2_slice07.jpg"/>
<img class="slice_8" src="ads/ad2_slice08.jpg"/>
<img class="slice_9" src="ads/ad2_slice09.jpg"/>
<img class="slice_10" src="ads/ad2_slice10.jpg"/>
<img class="slice_11" src="ads/ad2_slice11.jpg"/>
<img class="slice_12" src="ads/ad2_slice12.jpg"/>
<img class="slice_13" src="ads/ad2_slice13.jpg"/>
<img class="slice_14" src="ads/ad2_slice14.jpg"/>
<img class="slice_15" src="ads/ad2_slice15.jpg"/>
<img class="slice_16" src="ads/ad2_slice16.jpg"/>
<img class="slice_17" src="ads/ad2_slice17.jpg"/>
<img class="slice_18" src="ads/ad2_slice18.jpg"/>
<img class="slice_19" src="ads/ad2_slice19.jpg"/>
<img class="slice_20" src="ads/ad2_slice20.jpg"/>
<img class="slice_21" src="ads/ad2_slice21.jpg"/>
<img class="slice_22" src="ads/ad2_slice22.jpg"/>
</div>
</div>
</div>
<div class="billboard"></div>
Из этих изображений (22 кусочка по 35 пикселей каждый) у нас получится одно 770 пикселей на 340.
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;
}
Для позиционирования элемента в центре страницы, мы задаем значение left на 50% и left margin на негативное значение половины ширины элемента.
Контейнер для реклам будет иметь такие же стили, как и бигборд, кроме фонового изображения. Мы делаем это для того, чтобы позиционировать элементы рекламы в том же месте, где и бигборд. Мы не хотим размещать наши рекламы внутри бигборда, так как нам необходимо, чтобы бигборд был над ними. Поэтому мы используем этот трюк создавая элемент со схожим позиционированием.
Код:
.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. Нам также необходимо задать left margin вторых кусочков на 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;}
Позиционируя элементы на один пиксель левее их собственного размера, мы создаем небольшой просвет между ними. Теперь значение left margin 18 пикселей (половина кусочка + расстояние). Мы устанавливаем это, так как хотим наши кусочки появляться (или исчезать) из (или в) их центра. Если мы просто зададим ширину кусочка на 0, тогда не будет эффекта вращения. JavaScript
Теперь мы создадим простую функцию. Она будет заставлять первые кусочки исчезнуть (менять ширину на 0). Для эффекта вращения добавляем значение left margin = 18 пикселей.
По мере исчезновения первых кусочков, мы показываем вторые убирая left margin = 18 пикселей и придавая им ширину 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);
});
});
}
});
Заменив значения в строке со словом rotate (500 и 3000) можно изменить скорость анимации и задержку.
Вот и все готово! :)

Смотреть Demo
Скачать исходник.
  Ответить с цитированием
3 пользователя(ей) сказали cпасибо:
Старый 03.01.2010, 14:07 Вверх   #2
Fedoraвод
 
Аватар для Злой
Злой вне форума
Доп. информация
По умолчанию

Круто однако, вот только зачем он и куда его можно примастить?
  Ответить с цитированием
Старый 03.01.2010, 14:08 Вверх   #3
Старший модератор
 
Аватар для Ghost
Ghost вне форума
Доп. информация
По умолчанию

Например на главную страницу,для рекламы чего либо.
  Ответить с цитированием
Ответ

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавляем кнопки "По центру", "Влево", "Вправо" в хаке Expanded/Collapsed Menu BB-Code Sampler Инструкции по vBulletin 0 19.04.2011 17:57
Переназначаем функции клавиш - "MM", "Gallery", "Green", "0", "Camera"! Kustukturoff Nokia 4 27.04.2010 20:51


Текущее время: 22:55. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
 

Время генерации страницы 0.08604 секунды с 14 запросами