Есть ли плагин jquery или что-то, чтобы справиться с непрозрачностью изображения на уровне пикселей за пикселем?

В данный момент я работаю над проектом, в котором у меня есть два изображения, одно из которых расположено поверх другого, и я хотел бы, чтобы нижнее изображение показывалось больше, когда мышь перемещается по изображению, и мне нужно это на пиксель уровень пикселей, я попытался создать X на Y количество div, которые были 1px на 1px, каждый из которых имел один и тот же фон, но смещал фон по их позициям, поэтому каждый верхний пиксель изображения был div 1px, так что я мог изменить непрозрачность каждого div при наведении курсора мыши. Попытка этого привела к остановке моего браузера с таким количеством div.

Есть ли способ сделать это (не во флэш-памяти), но таким образом, чтобы он работал во всех браузерах достаточно быстро, чтобы он выглядел плавно и без остановки браузера?


person Paul    schedule 29.10.2011    source источник


Ответы (1)


Наиболее подходящим будет элемент Canvas. Однако он поддерживается не ВСЕМИ браузерами, а только настоящими. (Internet Explorer добавил поддержку Canvas только в версии 9).

используя холст с абсолютным позиционированием над изображением, кто-то может изменить альфа-значения холста, чтобы базовое изображение «сияло сквозь».

Примером непроизводственного кода может быть это (проверено и работает в FF7): http://jsbin.com/uxizav/edit#preview

person Roman    schedule 29.10.2011
comment
добавлен пример реализации, спрашивайте, есть ли у вас вопросы по коду - person Roman; 30.10.2011