Управление всплывающей информацией

Изображения оживляют интерфейс веб проектов. Кроме того, при наведении курсора мыши на картинку может открываться дополнительная информация (например, автор изображения и ссылка на его блог). У этой, простой на первый взгляд, задачи, есть некоторые особенности, которые нужно учитывать при организации интерфейса.

Рассмотрим возможные варианты решения.

Условия

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

<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

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

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



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

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