На сайте студии Лебедева в разделе "Наш портрет" есть лупа. Очень удобная штука — всегда можно приблизить и посмотреть на кого-нибудь поближе. И всем бы она хороша, да только дергается в IE со страшной силой. Видимо, автор подошел к решению задачи без огонька. Лебедевская лупа сделана на Canvas (для Опер, Сафарь и Фаерфоксов) и VML (для IE).
И тут у меня возник резонный вопрос: А можно ли всю эту красоту сделать исключительно средствами HTML4 — без всяких новомодных наворотов (сам же я, кстати, являюсь большим поклонником новомодных наворотов)?
Зачем это делать? Во-первых, чтобы решить проблемму адовых тормозов в ИЕ. Во-вторых — чтобы сделать решение для стареньких браузеров без канвы. И в-третьих, чтобы решить эту головоломку.
Всё заметно бы упростилось будь бы лупа квадратной. Тогда бы мы просто двигали дивчик, а у него внутри бэкграунд с большой картинкой. Но раз уж у нас лупа круглая, пришлось придумать вот такую штуку:
Лупу я спёр у Лебедева для чистоты эксперимента. В диве с зеленым бордером я двигаю бэкграундом большую картинку, а в дивах с красным бордером — маленькую картинку. Таким образом выходит, что углы «увеличивающего» дива сливаются с маленькой картинкой. По-моему, это то, что надо.
Это решение работает везде очень плавно и хорошо, кроме ИЕ6. Он явно в шоке от того количества дивов, style которых ему надо менять на каждую итерацию mousemove. Есть вариант достать конспекты по теории графов и попробовать уменьшить количество красных дивов, но опытным путём стало ясно, что тормоза начинаются уже от 10 дивов. Сомневаюсь, что удалось бы сократить их число меньше 10.
Поэтому обратимся к истории. В ИЕ есть такая штука как фильтры. Их то я и использую. Понятно, что imageAlphaLoader здесь мне не поможет, поскольку он не способен загрузить только альфа канал для выбранного элемента. А вот в связке с фильтром Chroma — вполне себе.
Подгружаем imageAlphaLoader'ом эту PNG-шку. Белый круг прозрачный. А потом фильтром Chroma сделаем черный цвет прозрачным. Ура ура. Всё получилось.
И так. Удалось решить задачку старыми дедовскими способами и существенно ускорирть работу в ИЕ.
technocat.ru/zoom
