Управление всплывающей информацией
Изображения оживляют интерфейс веб проектов. Кроме того, при наведении курсора мыши на картинку может открываться дополнительная информация (например, автор изображения и ссылка на его блог). У этой, простой на первый взгляд, задачи, есть некоторые особенности, которые нужно учитывать при организации интерфейса.
Рассмотрим возможные варианты решения.
Условия
Допустим, у нас есть разметка, для которой надо организовать выведение информации с названием картинки и ссылкой при наведении курсора мыши на изображение:
<figure> <img src="/image.jpg" alt="Пример изображение"> <figcaption> <h3>Пример изображения</h3> <a href="http://ruseller.com">материалы проекта RUSELLER.COM</a> </figcaption> </figure>
Простое решение: используем CSS для скрытия и вывода названия
Используем <figcaption>
в качестве раздела для всплывающей информации. Скрываем его по умолчанию и выводим при наведении курсора мыши на изображение:
figcaption { display: none; } figure:hover figcaption { display: block; }
Просто, но слишком грубо. Смотрите на демонстрационной странице.
Используем затухание: трансформации CSS3
Можно воспользоваться продвинутыми методами CSS3:
figcaption { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } figure:hover figcaption { opacity: 1; }
Для достижения желаемого эффекта нужно настроить длительность перехода.
Но данный метод имеет свой недостаток: информация будет появляться, даже если курсор мыши быстро прошел над картинкой (в такой ситуации пользователь явно не заинтересован в получении дополнительного материала).
Используем HoverIntent
Если подключить JavaScript, можно сделать работу нашего блока более изящной. Плагин jQuery HoverIntent поможет предотвратить нежелательные события hover. Он задает небольшую задержку перед генерацией события, поэтому быстрое перемещение курсора мыши над объектом не приведет ни к каким действиям, а медленная проводка и остановка вызовет появление дополнительной информации.
Можно сделать так:
$("figure").hoverIntent(function() { $("figcaption", this).fadeTo(400, 1); }, function() { $("figcaption", this).fadeTo(400, 0); });
Используем doTimeout
HoverIntent отлично справляется с ситуацией быстрого прохода курсора мыши над изображением. Но если у нас есть несколько изображений, то перемещение между ними будет связано сзадержкой появления названия, что тоже не очень хорошо. Для предотвращения таких ситуаций можно воспользоваться плагином doTimeout. Однако код будет несколько сложнее:
var li_cache, over = false; $( "figure" ) .delegate( "figcaption", "mouseenter", function ( e ) { var $li = $( this ), speed; if ( li_cache === this && over ) { $.doTimeout( "hoverOut" ); return; } if ( over ) { $.doTimeout( "hoverOut", true ); speed = 0; } else { $.doTimeout( "hoverOut" ); speed = 500; } $.doTimeout( "hoverIn", speed, function () { over = true; $li.find( "div" ).fadeTo( 200, 1.0 ); }); }) .delegate( "figcaption", "mouseleave", function ( e ) { var $li = $( this ); $.doTimeout( "hoverIn" ); $.doTimeout( "hoverOut", 500, function () { over = false; $li.find( "div" ).stop( true ).fadeOut(); }); });
Название появляется спустя 0.5 секунды после наведения курсора на изображение. А если передвинуть курсор мыши на другое изображение, то название появится сразу. Смотрите демонстрацию для примера 4.
Теперь информационный блок появляется так естественно, что сложность кода окупается.
Заключение
Как видите, совершенству нет предела.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/4nPp_AY0RM8/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 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
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Когда человек счастлив, он всегда хорош. Но не всегда хорошие люди бывают счастливы. О. Уайльд «Портрет Дориана Грея» |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.