Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Эффект Лупа на JavaScript (https://javascript.ru/forum/project/3668-ehffekt-lupa-na-javascript.html)

x-yuri 14.05.2009 11:01

да, похоже, с помощью javascript тут не сделаешь
flash?

Octane 14.05.2009 11:56

Через SVG (VML для IE) создать круг или маску в виде круга для блока, его фон будет отображать увеличеное изображение с необходимым смещением background-position.

vflash 14.05.2009 12:03

есть способ для картинок. картнка состоит какбы из мазайки
<div><img /></div>
<div> <img /> </div>
<div> <img /> </div>
<div><img /></div>

длина каждого div определяется по формуле круга. у каринки делается необходимый zoom (размеры) и позиционируется она абсолютно относительна своего дива. у дива overflow:hidden, он обрезает все лишнее

ZoNT 14.05.2009 13:19

Мда, тут всё немного сложнее придётся действительно извращаться с кучей дивов и динамически ставить им бэк как на уменьшенной картинке...
Идея такая: на текущую (квадратную) лупу накладываем сверху дивы, которые распологаются так:
_______________
|-----****-----|
|--*********--|
|-***********-|
|*************|
|-***********-|
|--*********--|
|-----****-----|
Звёздочки - "пустое" пространство, то есть не закрытое дивами, через него проглядывает уеличенное изображение.
Только вот много диво получится и много фонов придётся смещать...

Octane 14.05.2009 17:17

Вложений: 1
В прикрепленном файле пример круглой SVG-маски для изображения. Для изменения положения большого изображения нужно переместить абсолютно позиционированный <object> и внутри SVG для объекта <image> изменить transform="translate(…, …)". Как работать с SVG в JavaScript можно посмотреть, например, здесь. Для VML не намного сложнее.


Часовой пояс GMT +3, время: 22:56.