Среда, 16 Мая 2012 15:09

Движение картинки за курсором

Written by 
Оцени эту запись
(8 Голоса)

Часто встречала такую штуку, реализованную на flash. Вот решила сделать на Javascript'e. Идея в том, что при движении курсора по экрану или по некоторому блоку, содержимое перемещается. Содержимым может быть картинка, карта или даже менюшка. Если это содержимое больше масштабов видимости, мы можем его просмотреть перемещая курсор.  

 

 

 

Чтобы было понятнее, вот демо.

 

Основной блок имеет определенные размеры и обладает свойством overflow: hidden, то есть все, что не влазит, не видно. В нем сидит блок с картинкой, его размеры такие же, как у картинки. Внутренний блок абсолютно спозиционирован и отцентрован относительно основного. Когда над основным блоком ведем мышкой, картинка перемещается в противоположную сторону. Например, курсор идет вправо, картинка уходит на такое же расстояние влево, то есть открывается правый край.

 

Давайте разберем это подробнее:

 

 

<div class="main_cont">
<div class="img_cont"><img src="/images/img.jpg"></div>
</div>
 
Стили выглядят так:
 

 

 

.main_cont {width: 500px; height: 300px; position: relative; margin: 20px auto; overflow: hidden;}
.img_cont {width: 1600px; height: 1200px; position: absolute; top: -550px; left: -450px;}
.img_cont img {width: 1600px; height: 1200px;}
 
Основному блоку заданы определенные размеры, относительное позиционирование (чтобы держал абсолютный внуренний) и overflow: hidden(скрывает все лишнее).
Внутренный блок абсолютно спозиционирован, его размеры равны размерам картинки. Этому блоку также заданы смещение сверху и слева, но это не обязательно, ибо они высчитываются в скрипте.
 
 
Ну и, собственно, сам скрипт:
 
 
$(document).ready(function(){
var x;
var y;
var x2;
var y2;
var l = -parseInt($('.img_cont img').width()-$('.main_cont').width())/2;
var t = -parseInt($('.img_cont img').height()-$('.main_cont').height())/2;
$('.img_cont').css('left',l).css('top', t);
$('.main_cont').mouseenter(function(e){
var x = e.pageX;
var y = e.pageY;
$('.main_cont').mousemove(function(b,d){
var x2 = b.pageX;
var y2 = b.pageY;
var p = x2-x;
var d = y2-y;
$('.img_cont').css('left',l-p).css('top',t-d);
});
});
});
 
 
 
Задаем переменные:
x - координата x курсора, когда он попадает на основной блок
y - координата y курсора, когда он попадает на основной блок
x2 - координата x курсора, когда он двигается по блоку. это значение меняется динамически
y2 - аналогично для y
l - значение смещения влево внутреннего блока
t - смещение вверх
p - расстояние по горизонтали, на которое перемещается курсор var p = x2-x;
d - расстояние по вертикали, на которое смещается курсор var d = y2-y;
 
 
var l = -parseInt($('.img_cont img').width()-$('.main_cont').width())/2;
 
 
Переменная l равна (ширина картинки-ширина основного блока)/2
 
 
var t = -parseInt($('.img_cont img').height()-$('.main_cont').height())/2;
 
 
Аналогично для высоты.
 
 
$('.img_cont').css('left',l).css('top', t);
 
 
Внутренний блок смещаем так, чтобы видна была его центральная часть.
 
 
 
При наведении курсора на блок $('.main_cont').mouseenter(function(e){}); узнаем его начальные координаты:
 
 
var x = e.pageX;
var y = e.pageY;
 
 
Когда курсор на этом блоке начинает перемещаться $('.main_cont').mousemove(function(b,d){}); узнаем его новые координаты
 
 
var x2 = b.pageX;
var y2 = b.pageY;
 
 
и расстояние, на которое он при этом сместился
 
 
var p = x2-x;
var d = y2-y;
 
 
Потом перемещаем внутренний блок горизонтально и вертикально в сторону, противоположную перемещению курсора на такое же расстояние.  
 
$('.img_cont').css('left',l-p).css('top',t-d);
 
 
Вот так получаем нужный эффект!
 
 

Additional Info

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


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

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов