Несложный прием с использованием библиотеки jQuery, с помощью которого можно получить эффект увеличения (zoom) любого элемента на странице.
1. Подгружаем библиотеку.
2. HTML просматриваемой области состоит из 5 элементов.
The Wrap (#wrap) – контейнер.
Small Area (#small) – просматриваемая зона по умолчанию, по которой проводится мышкой для увеличения.
Large (#large) – увеличенная облась.
Overlay (#overlay) – контейнер-”увеличитель”, следующий за движениями мышки.
Mover (#mover) – сворачивание и перекрытие увеличенной зоны.
Не обязательно использовать именно эти ID, можно объявлять и свои.
3. CSS.
#wrap { width: 600px; position: relative; }
#small { position: relative; width: 100%; }
#large { background: white; position: relative; width: 600px; }
#mover { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }
4. Параметры
$("#wrap").anythingZoomer({
expansionSize: 30, // Как далеко может отходить мышь от краев
speedMultiplier: 1.4, // Насколько быстрее внутренняя зона движется быстрее мыши
smallArea: "#small", // Перекрытие ID маленькой зоны
largeArea: "#large", // Перекрытие ID большой зоны
zoomPort: "#overlay", // Перекрытие ID "увеличителя"
mover: "#mover" // Перекрытие ID движущихся элементов
});
Варианты демо смотреть
