Главная

Просмотр панорамных фото без Java и Flash

22/03/2007 19:27 — savostin

На многих (если не на подавляющем большинстве) сайтах обзор панорамных фотографий реализован с помощью Flash или хуже того Java applet. Природное стремление не усложнять привело меня к идее достигать того же результата без помощи модных и не всегда нужных для решения конкретной задачи штучек.

Рассмотрим реализацию простой панорамы с возможностью обзора влево и вправо с регулируемой скоростью, а также обзора вверх и вниз в пределах заданной фотографии.



var im; // div в котором будем показывать
var defaultSpeed = 1; // скорость по-умолчанию
var SpeedCoef = 100; // коэффициент увеличения скорости от расстояния от центра картинки
function init()
{
im = document.getElementById('viewer'); // нашли объект
im.dragging = false; // тащит ли пользователь сейчас
im.onmousedown = function(){ // начинаем тащить при нажатии мышью
im.dragging = true;
im.style.cursor = 'move';
};

im.onmousemove = function(e){
if (im.dragging){ // если пользователь тащит картинку
im.speedX = (((window.event || e).pageX||window.event.clientX) - im.offsetLeft - im.clientWidth / 2) / SpeedCoef; // вычисляем скорость движения по горизонтали в зависимости от расстояния от центра
im.topScroll = 100 * (((window.event || e).pageY||window.event.clientY) - im.offsetTop )/ im.clientHeight; // устанавливаем высоту картинки вы зависимости от положения курсора по вертикали
}
};
document.body.onmouseup = function(){ // пользователь отпустил мышь
im.dragging = false;
im.speedX = (im.speedX > 0 ? 1 : -1) * defaultSpeed; // возвращаем скорость в начальное значение с учетом направления, указанного пользователем
im.style.cursor = '';
};

im.leftScroll = 0; // начальное значение скроллинга картинки
im.topScroll = 50; // центр картинки 50%
im.speedX = defaultSpeed; // скорость по-умолчанию
im.int = window.setInterval(function(){ // вызываем каждые 0,01 сек
im.leftScroll -= im.speedX; // изменяем текщий отступ слева
im.style.backgroundPosition = im.leftScroll + 'px ' + im.topScroll + '%'; // выставляем background
}, 10);
}

Вот собственно и все - просто до безобразия. Желающие могут внутрь div'а с фото (он пустой) разместить управляющие элементы (сменить фото, изменить скорость и т.д. как подскажет фантазия), div можно заменить на a и сделать ссылкой.

Проверено Opera 9, FF 2, IE 7. Рабочий пример прилагается (фото - 475кб). Комментарии и замечания приветствуются.

Комментарии

Изображение пользователя IgrOK.
22/03/2007 19:32 IgrOK написал:

Прикольно :) Возьму на вооружение.

Изображение пользователя IgrOK.
22/03/2007 19:33 IgrOK написал:

Единственное: добавь отступы между абзацами в тексте. Сам же захотел отказаться от автопереносов :)

полезная штука.

28/03/2007 10:49 Sb написал:

только надо наверное ее еще доработать.

при клике и начале драга - наблюдается рывок по вертикали, сбивает восприятие (тестил FF, ie6).

кроме того ie мучительно моргает курсором и показывает стрелку вместо перекрестия.

Дык

Изображение пользователя savostin.
28/03/2007 10:55 savostin написал:

Никто и не говорил, что это конечный продукт - на коленке ж - для исследовательских целей "онли".

онли

28/03/2007 10:59 Sb написал:

не вопрос.
хотя, имхо, до конечности этому продукту совсем чуть-чуть осталось :)

ну и как скачать пример?

19/07/2007 15:03 kot1110 написал:

А?

Изображение пользователя IgrOK.
19/07/2007 18:49 IgrOK написал:

Исправил. Был глюк.

10/10/2007 08:43 MiddleSky написал:

скачать неполучаеться

13/03/2010 08:57 ledsky написал:

а где можно примерчик скачать или посмотреть ???