Всем привет. Возник такой вопрос: нужно реализовать блок, пусть будет размер 500px X 500px. У блока установлен background, размером 1000px X 500px, в позиции y:0, x:0. И когда наводишь курсор на блок, что бы бэкграунд следовал на курсором (в пределах блока, без ухода за край). Т.е. двигаю курсор внутри блока вниз - позиция Y background меняется. Все это должно быть не плавно, т.е. без заданной скорости анимации. Подскажите, как сделать) P.S. Пример такого слайдера можно найти на сайте http://apb.4game.ru/ , пролистав немного вниз.
1 ответ
Ну как-то так:
$('.item').mousemove(function(e){
var $this = $(this),
relativeX = e.pageX,
relativeY = e.pageY,
pos = relativeX + 'px ' + relativeY + 'px ';
$this.css('background-position', pos);
}).mouseleave(function(){
var $this = $(this);
$this.css('background-position', '0px 0px');
}).click(function(){
// buy it!!!
});
Фиддл тут: http://jsfiddle.net/alpha9000/Mv86z/