Галерея изображений с эффектом аккордеона

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

Подобные эффекты можно использовать на сайте для организации компактного отображения информации. Например, как на сайте auroraos.com.

 

HTML

Структура HTML разметки достаточно проста:

<div id="container">
    <div id="img_container">
        <img id="img1" src="/img/01.jpg"/>
        <img id="img2" src="/img/02.jpg"/>
        <img id="img3" src="/img/03.jpg"/>
        <img id="img4" src="/img/04.jpg"/>
        <img id="img5" src="/img/05.jpg"/>
    </div>
</div>

Изображения вложены в контейнер img_container, который в свою очередь вкладывается в контейнер container.

 

CSS

CSS также не представляет сложностей. Внешний контейнер должен иметь свойство overflow: hidden;, чтобы отрезать все изображения которые выходят за его границы. Сами изображения располагаются в одну линию и плотно прижимаются друг к другу . Их смещение в рабочее положение будет выполнять код JavaScript. Также устанавливаются свойства z-index для картинок, чтобы они накладывались в правильном порядке одна на другую. В коде используются правила для создания теней и скругленных углов.

    #container {
        margin: 0 auto;
        margin-top: 50px;
        width: 800px;
        height: 350px;
        overflow: hidden;
        border: 10px solid #000;
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
    }
    #img_container {
        width: 4000px;
    }
    #img_container img {
        position: relative;
        -moz-box-shadow: -5px 0 10px #000;
        -webkit-box-shadow: -5px 0 10px #000;
        box-shadow: -5px 0 10px #000;
        width: 600px;
	float: left;
	margin: 0;
	}
    #img1 { z-index: 0; }
    #img2 { z-index: 1; }
    #img3 { z-index: 2; }
    #img4 { z-index: 3; }
    #img5 { z-index: 4; }

 

JavaScript

В примере используется jQuery. Так что нужно подключить его к файлу HTML.

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

    $(document).ready(function() {
        var cwidth = parseInt($("#container").css("width").replace("px", "")); 	// Получаем ширину контейнера с изображениями
        var img_count = $("#img_container").children().length;			// Количество изображений
        var img_width = $("#img1").width();					// Ширина одного изображения
        var divider = cwidth / img_count;			     		// Ширина полоски, выделяемой для изображения в отсутствии курсора мыши над контейнером
        var small_space = (cwidth - img_width) / (img_count - 1);		// Ширина полоски, выделяемой для изобржаения при наличии курсора мыши над контейнером
		var timer = null;														// Таймер 

        // Устанавливаем позиции изображений
        var cssleft = Array();							
        $("#img_container img").each(function(index) {
			// Координаты хранятся в массиве
            cssleft[index] = new Array(); 				
            // Вычисляем и устанавливаем позицию изображения при отсутстсвии курсора мыши над контейнером
            cssleft[index][0] = (index * divider) - (index * img_width);
            $(this).css("left", cssleft[index][0] + "px");

            // Вычисляем позицию изображения при наведенном на него курсоре мыши
            cssleft[index][1] = (index * small_space) - (index * img_width);

            // Вычисляем координату правого угла изобржаения
            var index2 = index;
            if (index2 == 0) {
                index2++;
            }
            cssleft[index][2] = cssleft[index2 - 1][1];
        });

        // Курсор мыши над изображением 
        $("#img_container img").mouseenter(function() {
		
			if (timer) {
				clearTimeout(timer);
				timer = null;
			}
			
			var self = this;
			
			// Таймер используется для предотвращения "дергания" при быстром перемещении курсора мыши
			// над контейнером с изображениями
			timer = setTimeout(function() { 
			
				var img_id = parseInt($(self).attr("id").replace("img", "")) - 1;

				if ($(self).attr("id") != "img1") {
					$(self).animate({ 
						left: cssleft[img_id][1] 
					}, 300);
				}                
				loopNext(self);
				loopPrev(self);
			}, 200)
			
        });

	// Когда курсор мыши покидает контейнер изображений, возвращаем все в исходное состояние
        $("#img_container").mouseleave(function() {
			if (timer){
				clearTimeout(timer);
				timer = null;
			}
			
            $("#img_container img").each(function(index) {
                $(this).animate({
                    left: cssleft[index][0]
                }, 300);
            });
        });
	
	// Функция для установки изображений, предшествующих активному
        function loopPrev(el) {
            if ($(el).prev().is("img")) {
                var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

                if ($(el).prev().attr("id") != "img1") {
                    $(el).prev().animate({
                        left: cssleft[imgprev_id - 2][1]
                    }, 300);
                }
                loopPrev($(el).prev());
            }
        }
	
	//Функция установки изображений, следующих за активным	
        function loopNext(el) {
            if ($(el).next().is("img")) {
                var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

                $(el).next().animate({
                    left: cssleft[imgnext_id][2]
                }, 300);
                loopNext($(el).next());
            }
        }
    });

Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/qZhZe6FHJj4/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Галерея изображений с эффектом аккордеона | | 2012-06-19 12:05:08 | | Статьи Web-мастеру | | В данном уроке мы создаем небольшую галерею с эффектом раздвижных дверей или, как его еще называют,  аккордеона. Изображение, на которое наводится курсор мыши, показывается в полный размер, а все | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: