Canvas、SVG、VMLなしで円形拡大鏡を作成する方法





レベデフのスタジオのウェブサイトの「 ポートレート 」セクションに虫眼鏡があります。 非常に便利なこと-いつでもズームインして、近くの人を見ることができます。 そして、誰もが良いでしょうが、ひどい力でIEをぐいと動かします。 どうやら、著者はきらめきなく問題の解決に近づいたようです。 Lebedevの拡大鏡は、Canvas(Opera、Safari、Firefox用)およびVML(IE用)で作成されています。



そして、私は合理的な質問がありました:すべてのこの美しさをHTML4のみを使用して作成することは可能ですか?新品の添えものなし

どうしてですか? まず、IEの地獄のようなブレーキの問題を解決します。 第二に-キャンバスなしで古いブラウザの決定を下す。 そして第三に、このパズルを解決します。



虫眼鏡が正方形の場合、すべてが著しく簡素化されます。 それからディバンを動かすだけで、その中には大きな絵のある背景があります。 しかし、丸い虫眼鏡があるので、私はこのことを考え出さなければなりませんでした:





私は実験の純度のためにレベデフから拡大鏡を盗みました。 緑の境界線のある歌姫では、背景に大きな絵を、赤い境界線のある歌姫には小さな絵を移動します。 したがって、「拡大する」歌姫の角は小さな絵と融合することがわかります。 私の意見では、これが必要なものです。



このソリューションは、IE6を除き、どこでも非常にスムーズに機能します。 mousemoveを繰り返すたびにスタイルを変更する必要があるdivの数には、明らかにショックを受けています。 グラフ理論に関するメモを取得し、赤いdivの数を削減しようとするオプションがありますが、経験から、ブレーキはすでに10 divから始まっていることが明らかになりました。 それらの数を10未満に減らすことはできないと思います。



したがって、歴史に目を向けます。 IEにはフィルターのようなものがあります。 私はそれらを使用します。 imageAlphaLoaderは、選択されたアイテムのアルファチャネルのみをロードできないため、ここでは役に立ちません。 しかし、クロマフィルターと組み合わせて-非常に想像しました。







このPNGスキンをimageAlphaLoaderでロードします。 白い円は透明です。 そして、クロマフィルターで、黒色を透明にします。 やったー すべてうまくいきました。



など。 古い祖父の方法で問題を解決し、IEでの作業を大幅に加速することができました。



technocat.ru/zoom




All Articles