Понедельник, 23 Апреля 2012 12:33

Lightbox. Accordion. Scrolling text.

Written by 
Оцени эту запись
(1 Голос)

Продолжаю серию полезных для сайта динамических эффектов. Ранее я подробно рассказывала о Реализация hightlighter, tabs, lightbox и закрытие блока при клике, в данной же статье рассмотрю такие эффекты:

  • Lightbox
  • Accordion
  • Scrolling text

 

Lightbox (лайтбокс) чаще всего используется для показа картинки в полном размере или для вывод формы - авторизации, регистрации и т.д.

Accordion (аккордион) может использоваться в информационных и других блоках, для вывода меню (например, категории товаров - сразу видны основные категории, а при разворачивании можно получить подкатегории) или для любого другого контента, для которого вначале можно показать только заголовки, а содержание пользователь может узнать, развернув аккордион.

Scrolling text - это текст "бегущая строка", в таком виде можно показывать анонсы новостей, акции, новости от партнеров и многое другое.

 

Смотрим демо

 

 

Lightbox

 

Первый эффект - лайтбокс.

 

Там видно пять маленьких превьюшек, нажав на любую из них получаем всплывающее окно Lightbox, в котором видем эту картинку в полном размере. Причем, если кликнем на третью фотку, то получим именно ее изображение. Внутри лайтбокса реализован эффект скроллинга. Об этом подробно можно прочитать здесь - Скроллер картинок. В лайтбоксе имеется кнопочка "Х", с помощью которой окно можно закрыть.

 

HTML код:

 

 

 <div class="items_cont">  
               <div class="item_cont_inner">  
                <div class="item_cont">
                    <img src="/style/images/demo2_slide1.png">
                </div>    
                <div class="item_cont">
                    <img src="/style/images/demo2_slide2.png">
                </div>    
                <div class="item_cont">
                    <img src="/style/images/demo2_slide3.png">
                </div>    
                <div class="item_cont">
                    <img src="/style/images/demo2_slide4.png">
                </div>   
                
                <div class="item_cont">
                    <img src="/style/images/demo2_slide5.png">
                </div>   
                <div style="cleaR: left;"></div>
                </div>
                <div class="prod_rewiew_cont">
                <div class="prod_rewiew">
                    <div class="exit">X</div>
                    <div class="item_gallery">
                        <a href="javascript: void(0);" class="item_gallery_ar left"></a>
                            <a href="javascript: void(0);" class="item_gallery_ar right"></a>
                            <div class="item_gallery_cont">
                                <div class="item_gallery_cont_inner" style="width: 5000px;">
                                    <div class="item_gallery_photo"><img src="/style/images/demo2_slide1.png"></div>
                                    <div class="item_gallery_photo"><img src="/style/images/demo2_slide2.png"></div>
                                    <div class="item_gallery_photo"><img src="/style/images/demo2_slide3.png"></div>
                                    <div class="item_gallery_photo"><img src="/style/images/demo2_slide4.png"></div>
                                    <div class="item_gallery_photo"><img src="/style/images/demo2_slide5.png"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
 
Здесь в блоке item_cont_inner лежат превьюшки картинок, они просто выводятся, туту ничего интересного. Блок prod_rewiew_cont - это контейнер лайтбокса. Он пока не отображается, появится только при клике на картинку. В нем лежат стрелочки вправо и влево, для перелистывания картинок, и сами картинки.
 
Есть еще дополнительный блок 
 
<div class="lightbox_bg"></div>
 
 
Он реализовует фон лайтбокса - затемняет весь экран, имеет небольшую прозрачность.
Стили у него такие
 
.lightbox_bg {
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
background: #000; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-opacity: 0.9; 
-khtml-opacity: 0.9; 
opacity: 0.9; 
  display: none;
z-index: 99;
}
 
 
Скрипт (не забудьте подключить библиотеку jQuery):
 
<script>
$(function(){
$('.item_cont img').click(function(){
$('.lightbox_bg').fadeIn(50);
$('.prod_rewiew_cont').fadeIn(1000);
var n = $('.item_cont_inner .item_cont').index(this.parentNode);
$('.exit').click(function(){
$('.lightbox_bg').fadeOut(0);
$('.prod_rewiew_cont').fadeOut(0);
});
var c = $('.item_gallery_photo').length*640;
$('.item_gallery_cont_inner').css('left',-n*652+'px');
var b = $('.item_gallery_cont_inner').css('left');
var a = parseInt(b)+640;
$('.item_gallery_ar.right').click(function(){
 
if (-c+1280<a){
$('.item_gallery_cont_inner').animate({left: '-=652',});
a = a-652;
}
});
 
 
$('.item_gallery_ar.left').click(function(){
if (640>a){
$('.item_gallery_cont_inner').animate({left: '+=652',});
a = a+652;
};
});
});
});
</script>
 
 
Разберем скрипт подробнее:
 
$('.item_cont img').click(function(){});
 
при клике на картинку, которая лежит в блоке item_cont  происходит следующее
 
$('.lightbox_bg').fadeIn(50);
$('.prod_rewiew_cont').fadeIn(1000);
 
показывается ранее скрытый фон лайтбокса и скрытый блок, содержащий большие картинки.
 
var n = $('.item_cont_inner .item_cont').index(this.parentNode);
 
 
здесь мы узнаем порядковый номер картинки, на которой был клик, чтобы показать увеличенной именно ее.
 
$('.exit').click(function(){
$('.lightbox_bg').fadeOut(0);
$('.prod_rewiew_cont').fadeOut(0);
});
 
В этих строках реализовуется закрытие lightbox'а - скрывается темный фон экрана и скрывается блок, сожержащий большие картинки.
 
$('.item_gallery_cont_inner').css('left',-n*652+'px');
 
Перемещаем блок, который скроллится влево на количество пикселей, равное "n"  - порядковый номер, на который кликнули, умноженный на ширину картинки.
 
Остальные строки относятся непосредственно к внутреннему скроллеру в лайтбоксе, об это в другой статье.
 
На этом Lightbox готов!
 
 
 

Accordion

 

 

<div class="accordion_cont">
            <div class="accordion_item">
                <div class="accordion_item_header">
                    Пункт 1
                        <a href="#" class="ac_arrow"></a>
                    </div>
                    <div class="accordion_item_body">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
                
            <div class="accordion_item">
                <div class="accordion_item_header">
                    Пункт 2
                        <a href="#" class="ac_arrow"></a>
                    </div>
                    <div class="accordion_item_body">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
                
            <div class="accordion_item">
                <div class="accordion_item_header">
                    Пункт 3
                        <a href="#" class="ac_arrow"></a>
                    </div>
                    <div class="accordion_item_body">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
                
            <div class="accordion_item">
                <div class="accordion_item_header">
                    Пункт 4
                        <a href="#" class="ac_arrow"></a>
                    </div>
                    <div class="accordion_item_body">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
                
            <div class="accordion_item">
                <div class="accordion_item_header">
                    Пункт 5
                        <a href="#" class="ac_arrow"></a>
                    </div>
                    <div class="accordion_item_body">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
           </div>  
 
 

Блок accordion_cont содержит весь аккордион. Блоки accordion_item - отдельные элементы аккордиона. Каждый элемент делится на заголовок accordion_item_header, который видно при открытии страницы, и на тело accordion_item_body, которое изначать скрыто.

 

В заголовке у нас некоторый текст и стрелочка. по которой мы сможем открывать и закрывать каждый элемент.

В теле содержится текст, но там может быть и картинка, и целый блок.

 

Блоку accordion_item_body изначально задаем display: none;, он будет показан при клике на стрелочку. Также при клике на стрелочку, заголовку, в котором она лежит, будет добавляться класс active. Благодаря этому, мы может изменить вид стрелочки, когда текущий элемент аккордиона открыт.

 

Смотрим скрипт:

 

<script>
  $(function(){
$('.ac_arrow').click(function(){
if($(this).parent().hasClass('active')){
$(this).parent().parent().children('.accordion_item_body').fadeOut(0);
$(this).parent().removeClass('active');
}
else{
$(this).parent().parent().children('.accordion_item_body').fadeIn(500);
$(this).parent().addClass('active');
}
 
});
});
  </script>

 

Здесь все просто. Когда кликаем на стрелочку - это элемент с классом ac_arrow, родительскому заголовку добавляем класс active

 

$(this).parent().addClass('active');

 

И задаем видимость соответствующему телу аккордиона

 

$(this).parent().parent().children('.accordion_item_body').fadeIn(500);

 

При повротном клике, все возвращаем назад

 

 

$(this).parent().parent().children('.accordion_item_body').fadeOut(0);
$(this).parent().removeClass('active');

 

Для того, чтобы открывались только закрытые элементы, используем условие

 

if($(this).parent().hasClass('active')){

}

else{
}
 
То есть, если мы кликаем стрелочку открытого элемента, то он закрывается. Если на стрелочку закрытого, он открывается.
 
 

Scrolling text - бегущая строка

 

 

<div class="scrolling_text">
            <div class="scrolling_text_inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
                </div> 
           </div>   
 
Здесь блок scrolling_text - контейнер, содержащий всю бегущую строку, а блок scrolling_text_inner мы будем скролить, перемещая его медленно влево.
Изначально блоку scrolling_text_inner задаем большую ширину, чтобы текст был в одной строке.
Юлоку scrolling_text  задаем в стилях overflow: hidden.
 
 
<script>
$(function(){
var c = parseInt($('.scrolling_text_inner').text().length)*7;
var n = parseInt($('.scrolling_text_inner').parent().css('width'));
var b = c+n;
$('.scrolling_text_inner').css('left', n);
setInterval(function(){
$('.scrolling_text_inner').animate({left: '-='+b}, b*15, "linear", function(){$('.scrolling_text_inner').css('left', n);});
},500);
});
</script>
 
Разберем скрипт.
 
var c = parseInt($('.scrolling_text_inner').text().length)*7;
 
узнаем реальную ширину внутреннего блока - .text().length показывает количество символом текста, на 7 умножаем, чтобы получить размер в пикселах.
 
var n = parseInt($('.scrolling_text_inner').parent().css('width'));
 
Узнаем ширину родительского элемента (он у меня 90%, потому в зависимотси от размера экрана может быть разным)
 
 
$('.scrolling_text_inner').css('left', n);
 
Уводим внутренный блок за пределы внешнего, чтобы текст выезжал сбоку.
 
setInterval(function(){
$('.scrolling_text_inner').animate({left: '-='+b}, b*15, "linear", function(){$('.scrolling_text_inner').css('left', n);});
},500);
 
При загрузке экрана, внутренний блок с текстом находится за пределами видимости. Мы начинаем его перемещать влево при помощи .animate({left: '-='+b});, где b = n+c - ширина внешнего блока (потому что изначально мы его так вправо увели) плюс ширина внутреннего (чтобы весь текст ушел влево).
 
b*15, "linear"
 
влияют на скорость и тип анимации
 
function(){$('.scrolling_text_inner').css('left', n);}
 
Функция начинает выполняться, когда закончится анимация.
 
Все это обернуто в такую штуку:
 
setInterval(function(){},500);
 
Этим мы задаем, что наша анимация начинается через какое-то время и через такое же время после завершения анимации она начинается заново. То есть по сути наш текст вудет постоянно перемещаться - появился справа, ушел влево и снова появился справа.
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов