Skip to content

Instantly share code, notes, and snippets.

@s0ber
Created May 23, 2012 11:25
Show Gist options
  • Save s0ber/2774683 to your computer and use it in GitHub Desktop.
Save s0ber/2774683 to your computer and use it in GitHub Desktop.
mousemove event handler
// Обработчик наведения курсора мыши на аватарку (плавное смещение фона при движении курсора мыши над аватаркой)
avatarHoverEvent: function(e) {
var $this = $(e.currentTarget),
offset = $this.offset(),
side = this.avatarsSide,
x = e.pageX - Math.floor(offset.left),
y = e.pageY - Math.floor(offset.top),
percentX = Math.round(x / side * 100),
percentY = Math.round(y / side * 100),
dataType = $this.attr('data-type');
if (dataType != 'total') {
$this
.find('.js-feed-item-icon-content')
.css('background-position', percentX + '% ' + percentY + '%');
}
}
@a-ignatov-parc
Copy link

@s0ber Ну скинь ссылочку что ли посомтреть как переделал

@s0ber
Copy link
Author

s0ber commented May 23, 2012

@a-ignatov-parc Всё потер уже, к сожалению. Но там как оказалось некоторые вещи были некроссбраузерными.

@a-ignatov-parc
Copy link

Такой функционал необходимо реализовывать за счет нескольких событий:

  • mouseenter - ты получаешь offset() иконки + позицию мышки так же ты высчитываешь получаешь все необходимые значения + ты кешируешь необходимые дом элементы;
  • mousemove - по позиции мышки и ранее закешированым значениям ты высчитываешь окончательное смещение и выставляешь его закешированному элементу

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment