Галерея изображений с эффектом аккордеона
В данном уроке мы создаем небольшую галерею с эффектом раздвижных дверей или, как его еще называют, аккордеона. Изображение, на которое наводится курсор мыши, показывается в полный размер, а все остальные картинки видны лишь частично.
Подобные эффекты можно использовать на сайте для организации компактного отображения информации. Например, как на сайте 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Неудача — это не единичное внезапное событие. Ваш провал не возникает внезапно. Напротив, неудача появляется, когда вы совершаете одни и те же ошибки изо дня в день. Джим Рон |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.