Заготовка страницы фото галереи с эффектом 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 галерею, красиво показывающую крупный вариант картинки.