Заготовка страницы фото галереи с эффектом zoom на JavaScript. Внутри приближающихся блоков могут быть картинки со ссылками и вообще любой вменяемый для плавающего блока HTML.
В Сафари и Опере выглядит лучше всего, они красиво масштабируют картинки.
В целом все достаточно просто. При загрузке собирается пул обьектов, которые будут увеличиваться под мышкой. Затем, в обьекте document регистрируется обработчик события onMouseMove, на каждое движение мышкой вычисляющий для обьектов из пула, насколько сильно он должен быть увеличен.
Размеры блоков зависят от расстояния до мышки.
Фактически суть эффекта можно выразить в формуле:
размер блока = f(расстояние до курсора)
Расстояние от блока до мышки вычисляем по теореме Пифагора:
расстояние до курсора = sqrt(pow(x1 - x2, 2) + pow(y1 - y2, 2))
Где x1, y1 и x2, y2 соответвеннно координаты мышки и блока.
Функция f — составная, на основе косинуса.
Граффик косинуса сжат по вертикале в два раза и поднят до 1, также сжат по горизонтале в Пи раз, левый и правый полупериоды зачанчиваются прямыми линиями.
Итак, чем ближе курсор к блоку (Х на графике), тем сильнее его надо увеличить (Y). Функция возвращет результат в удобном для дальнейших манипуляций виде — от 0 до 1.
function math_hill(x)
{
if(x>=0.5 || x<=-0.5)
return 0;
else
return (Math.cos(x*6.283)+1)/2;
}
Конечно, вы можете взять коды со страницы с примером и забабахать у себя такую классную галерею, но я бы не претендовал на готовое решение, скорее это описание архитектуры и математических алгоритмов, которые вы можете использовать по своему. Например, при клике по картинке, можно вызвать другую JS галерею, красиво показывающую крупный вариант картинки.
Comments:
Идея интересная и приятная. Однако у неё есть один минус —
картинка показывается полномасштабно (т.е. в хорошем
качестве) только в одной точке, что, согласитесь,
не очень хорошо. Поэтому Ваш график надо поприжать к
единице в каком-нибудь диазоне.
Полностью согласен.