—»     —»   Триггер для наведения и клика для окружных элементов с помощью jQuery
  Раздел: Руководства, Tips and Tricks, CSS/Style Sheets   Комментариев: 1  

Триггер для наведения и клика для окружных элементов с помощью jQuery

Применение к элементу псевдо-класса a :hover широко распространенно под термином «hovering». С появлением параметра border-radius тут же возникла проблема в том, что эффект при наведении кажется не реалистичным, тем более, что событие запускается тогда, когда курсор мыши входит в сам блок с элементом, а не на его видимую область. Это перерастает в очень большую проблему, если мы хотим использовать круглые элементы посредством 50%-ного значения параметра border-radius.

Сегодня мы хотим поделиться с вами действенным решением, которое поможет вам решить данную проблему. Мы разработаем плагин, который будет обрабатывать события «mouseenter», «mouseleave» и «click», и запускать их только тогда, когда курсор мыши достигает видимой области элемента.

Триггер для наведения и клика для окружных элементов с помощью jQuery

Изображения, использованные в демо, были предоставлены Андреем и Лили. Они распространяются под лицензионным соглашением Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0).

Как оно работает

В нашем примере мы создадим окружность с эффектом при наведении. Структура будет очень простой:

<a href="#" id="circle" class="ec-circle">
<h3>Hovered</h3>
</a>

А стили будут следующими:

.ec-circle{
width: 420px;
height: 420px;
-webkit-border-radius: 210px;
-moz-border-radius: 210px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-family:'Kelly Slab', Georgia, serif;
background: #dda994 url(../images/1.jpg) no-repeat center center;
box-shadow:
inset 0 0 1px 230px rgba(0,0,0,0.6),
inset 0 0 0 7px #d5ad94;
transition: box-shadow 400ms ease-in-out;
display: block;
outline: none;
}

Теперь мы определим класс для эффекта при наведении, который, кстати, не будет динамическом псевдо-классом :hover. Идея заключается в том, чтобы задать этот класс позже, посредством jQuery, когда мы уже добавим окружную область к нашему элементу:

.ec-circle-hover{
box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),
inset 0 0 0 20px #c18167,
0 0 10px rgba(0,0,0,0.3);
}

Мы добавляем псевдо-класс только в случае отключенной поддержки javascript. Данный стиль можно найти в noscript.css:

.ec-circle:hover{
box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),
inset 0 0 0 20px #c18167,
0 0 10px rgba(0,0,0,0.3);
}

javascript-код

Мы создадим новый плагин, который просто «переопределяет» 3 события, о которых мы упоминали ранее. Мы сделаем так, что события будут применимы только к окружной фигуре:

$.CircleEventManager             = function( options, element ) {

this.$el = $( element );

this._init( options );

};

$.CircleEventManager.defaults = {
onMouseEnter : function() { return false },
onMouseLeave : function() { return false },
onclick : function() { return false }
};

$.CircleEventManager.prototype = {
_init : function( options ) {

this.options = $.extend( true, {}, $.CircleEventManager.defaults, options );

// set the default cursor on the element
this.$el.css( 'cursor', 'default' );

this._initEvents();

},
_initEvents : function() {

var _self = this;

this.$el.on({
'mouseenter.circlemouse' : function( event ) {

var el = $(event.target),

circleWidth = el.outerWidth( true ),
circleHeight = el.outerHeight( true ),
circleLeft = el.offset().left,
circleTop = el.offset().top,
circlePos = {
x : circleLeft + circleWidth / 2,
y : circleTop + circleHeight / 2,
radius: circleWidth / 2
};

// save cursor type
var cursor = 'default';

if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
cursor = 'pointer';

el.data( 'cursor', cursor );

el.on( 'mousemove.circlemouse', function( event ) {

var distance = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );

if( !Modernizr.borderradius ) {

// inside element / circle
el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
_self.options.onMouseEnter( _self.$el );

}
else {

if( distance <= circlePos.radius && !el.data('inside') ) {

// inside element / circle
el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
_self.options.onMouseEnter( _self.$el );

}
else if( distance > circlePos.radius && el.data('inside') ) {

// inside element / outside circle
el.css( 'cursor', 'default' ).data( 'inside', false );
_self.options.onMouseLeave( _self.$el );

}

}

});

},
'mouseleave.circlemouse' : function( event ) {

var el = $(event.target);

el.off('mousemove');

if( el.data( 'inside' ) ) {

el.data( 'inside', false );
_self.options.onMouseLeave( _self.$el );

}

},
'click.circlemouse' : function( event ) {

// allow the click only when inside the circle

var el = $(event.target);

if( !el.data( 'inside' ) )
return false;
else
_self.options.onclick( _self.$el );

}
});

},
destroy : function() {

this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor');

}
};

Когда курсор мыши попадает в область блока, в котором расположена окружность, элементу задается событие mousemove, и таким образом мы можем отслеживать расстояние от курсора до центра элемента. Если расстояние больше указанного радиуса, то эффект при наведении не задействуется.

Триггер для наведения и клика для окружных элементов с помощью jQuery

Как только расстояние от курсора мыши до центра становится меньше указанного радиуса, это означает, что курсор достиг окружности, и тогда запускается пользовательское событие mouseenter.

Также и событие click запускается только тогда, когда курсор достигает окружности.

В нашем примере мы применяем наш плагин к соответствующему элементу. В нашем случае мы задаем класс при наведении к событию mouseenter и отключаем его от mouseleave.

$('#circle').circlemouse({
onMouseEnter : function( el ) {

el.addClass('ec-circle-hover');

},
onMouseLeave : function( el ) {

el.removeClass('ec-circle-hover');

},
onclick : function( el ) {

alert('clicked');

}
});

Помните, что «нормальный» класс псевдо-наведения также определяется в noscript.css, который применяется в случае отключенной поддержки javascript.

Надеемся, данное руководство окажется для вас полезным.

Демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 11848   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 января 2012 @ 09:09
Написал: neebabelna — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень хорошо и подробно все описано. Нужная информация, особенно для тех, кто профессионально работает.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Уф печать на стекле
Качественная печать на современном оборудовании! Звоните
printari.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031