純粋な JavaScript を使用して虫眼鏡効果を達成する_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

純粋な JavaScript を使用して虫眼鏡効果を達成する_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:08 PM

javascript拡大鏡

JD または淘宝網の特定の商品には虫眼鏡効果があります。インターネット上には同様のプラグインが多数ありますが、プロジェクトに適用するには不便な点が多いため、時間をかけて自分で同様のプラグインを作成してコードを蓄積してみてはいかがでしょうか。 🎜>

この特殊効果をプラグインにカプセル化する予定です。最初に最も基本的なアルゴリズムを実装し、それから段階的にカプセル化します。

最終効果:

html コード:

コードをコピーしますコードは次のとおりです:

CSS コード:

コードをコピーしますコードは次のとおりです:

* {

マージン: 0;

パディング: 0;

}

何もないようです。強力な JS の旅を始めましょう:

JavaScript コード:

コードをコピーコードは次のとおりです:

  function createElement(MagnifierId, sImg, bImg) {

            var Magnifier = $(MagnifierId);

            Magnifier.style.position = '相対';

            //小图div

            var smallDiv = $Create("div");

            smallDiv.setAttribute("id", "small");

            smallDiv.style.position = "絶対";

            //遮罩层

            var マスク = $Create("div");

            マスク.setAttribute("id", "マスク");

            マスク.スタイル.ポジション = "絶対";

            //镜片

            var ミラー = $Create("div");

            ミラー.setAttribute("id", "ミラー");

            ミラー.スタイル.不透明度 = 0.3;

            ミラー.スタイル.ポジション = "絶対";

            Mirror.style.display = "なし";

            //小图

            var smallImg = $Create("img");

            smallImg.setAttribute("src", sImg);

            smallImg.setAttribute("id", "smallImg");

            smallImg.onload = function () {

                // 配置されない場合は、配置最大の高さまたは幅が小さい画像に基づいて配置されます

                if (!Magnifier.offsetHeight) {

                    Magnifier.style.width = this.offsetWidth "px";

                    Magnifier.style.height = this.offsetHeight "px";

                }

                //遮罩层大和小图一样

                マスク.スタイル.不透明度 = "0";

                マスク.スタイル.幅 =​​ this.width 'px';

                マスク.スタイル.高さ = this.高さ "px";

                マスク.スタイル.zIndex = 2;

                bigDiv.style.left = this.width 5 "px";

                bigDiv.style.top = "-5px";

            }

            smallDiv.appendChild(マスク);

            smallDiv.appendChild(ミラー);

            smallDiv.appendChild(smallImg);

            //ビデオ

            var bigDiv = $Create("div");

            bigDiv.setAttribute("id", "big");

            bigDiv.style.position = "絶対";

            bigDiv.style.overflow = "非表示";

            bigDiv.style.display = "なし";
            var bigImg = $Create("img");

            bigImg.setAttribute("src", bImg);

            bigImg.setAttribute("id", "bigImg");

            bigImg.style.position = "絶対";

            bigDiv.appendChild(bigImg);

            Magnifier.appendChild(smallDiv);

            Magnifier.appendChild(bigDiv);

        }

        function setMagnifierStyle(mirrorStyle,shichuangStyle) {

            //ミラー

            for (mirrorStyle の var item) {

                ミラー.スタイル[アイテム] = ミラースタイル[アイテム];

            }

            for (shichuangStyle の var item) {

                $("big").style[item] = shichuangStyle[item];

            }

        }

        関数 registerEvent() {

            $("マスク").onmouseover = function () {

                $("big").style.display = "ブロック";

                Mirror.style.display = "ブロック";

            }

            $("マスク").onmouseout = function () {

                $("big").style.display = "なし";

                Mirror.style.display = "なし";

            }

            $("マスク").onmousemove = function (evt) {

                var oEvent = evt ||イベント;

                var disX = oEvent.offsetX;

                var disY = oEvent.offsetY;

                var MirrorLeft = disX - Mirror.offsetWidth / 2;

                var MirrorTop = disY - Mirror.offsetHeight / 2;

                if (mirrorLeft 
                    ミラー左 = 0;

                }

                else if (ミラー左 > マスク.オフセット幅 - ミラー.オフセット幅) {

                    ミラー左 = マスク.オフセット幅 - ミラー.オフセット幅;

                }

                if (mirrorTop 
                    ミラートップ = 0;

                }

                else if (ミラートップ > マスク.オフセット高さ - ミラー.オフセット高さ) {

                    ミラートップ = マスク.オフセット高さ - ミラー.オフセット高さ;
                }

                Mirror.style.top = MirrorTop "px";

                Mirror.style.left = ミラー左 "px";

                var paX = MirrorTop / (mask.offsetHeight - Mirror.offsetHeight);

                var paY = MirrorLeft / (mask.offsetWidth - Mirror.offsetWidth);

                $("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) "px";

                $("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) "px";

            }

        }

        関数 $(id) {

            return document.getElementById(id);

        }

        関数 $Create(type) {

            return document.createElement(type);

        }

最後に再び onload小小の调用一下：

复制代代码如下:

 window.onload = function () {

            createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");

            setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });

            registerEvent();

        }

效果总算出来了耶，

2. 次来咱们封装吧：

Magnifer类代码：

复制代码代码如下:

関数拡大鏡(

Magnifierid, // ミラーコンテナ ID を拡大します 

Simg、
bimg、なぜなら
MirrorStyle, // スモールピクチャーレンズスタイルでは、json形式のデータ 

) {

var _this = this;

This.MagnifierContainer = null //コンテナ

This.smallDiv = null //小さい画像コンテナ

This.mask = null //小さい画像マスクレイヤー

this.mirror = null;
This.smallImg = null //小さい画像

This.bigDiv = null // プレビュービュー

This.bigImg = null;
var init = function () {

_this.MagnifierContainer = _this.$(MagnifierId);

_this.createElement(sImg, bImg);

_this.setMagnifierStyle(mirrorStyle, ViewStyle);

_this.MainEvent();

}

init();

}

Magnifier.prototype.createElement = function (sImg, bImg) {

var _this = this;

var $Create = this.$Create;

This.MagnifierContainer.style.position = 'relative' // ドキュメント フローから抜け出し、必要に応じて変更します
;
This.smallDiv = $Create("div");

This.smallDiv.setAttribute("id", "small");

This.smallDiv.style.position = "絶対";
This.mask = $Create("div");

This.mask.setAttribute("id", "mask");

This.mask.style.position = "絶対";

This.mirror = $Create("div");

This.mirror.setAttribute("id", "mirror");

This.mirror.style.opacity = 0.3;

This.mirror.style.position = "絶対";

This.mirror.style.display = "なし";

This.smallImg = $Create("img");

This.smallImg.setAttribute("src", sImg);

This.smallImg.setAttribute("id", "smallImg");

This.smallImg.onload = function () {

//虫眼鏡の高さまたは幅が設定されていない場合は、サムネイルのサイズに応じて虫眼鏡のサイズを設定します

If (!_this.MagnifierContainer.offsetHeight) {

_this.MagnifierContainer.style.width = this.offsetWidth "px";

_this.MagnifierContainer.style.height = this.offsetHeight "px";

}

//マスクレイヤーのサイズは小さい画像と同じです

_this.mask.style.opacity = "0";

_this.mask.style.width = this.offsetWidth 'px';

_this.mask.style.height = this.offsetHeight "px";

_this.mask.style.zIndex = 2;

_this.bigDiv.style.left = this.offsetWidth 5 "px";

_this.bigDiv.style.top = "-5px";

}

This.smallDiv.appendChild(this.mask);

This.smallDiv.appendChild(this.mirror);

This.smallDiv.appendChild(this.smallImg);

This.bigDiv = $Create("div");

This.bigDiv.setAttribute("id", "big");

This.bigDiv.style.position = "絶対";

This.bigDiv.style.overflow = "非表示";

This.bigDiv.style.display = "なし";

This.bigImg = $Create("img");

This.bigImg.setAttribute("src", bImg);

This.bigImg.setAttribute("id", "bigImg");

This.bigImg.style.position = "絶対";

This.bigDiv.appendChild(this.bigImg);

This.MagnifierContainer.appendChild(this.smallDiv);

This.MagnifierContainer.appendChild(this.bigDiv);

}
        Magnifier.prototype.setMagnifierStyle = function (mirrorStyle, ViewStyle) {

            for (mirrorStyle の var item) {

                this.mirror.style[アイテム] = ミラースタイル[アイテム];

            }

            アイテムを削除;

            for (ViewStyle の var item) {

                this.bigDiv.style[item] = ViewStyle[item];

            }

        }

        Magnifier.prototype.MainEvent = function () {

            var _this = this;

            this.mask.onmouseover = function () {

                _this.bigDiv.style.display = "ブロック";

                _this.mirror.style.display = "ブロック";

            }

            this.mask.onmouseout = function () {

                _this.bigDiv.style.display = "なし";

                _this.mirror.style.display = "なし";

            }

            this.mask.onmousemove = function (evt) {

                var oEvent = evt ||イベント;

                var disX = oEvent.offsetX || oEvent.layerX;  //兼容ff

                var disY = oEvent.offsetY || oEvent.layerY;

                var MirrorLeft = disX - _this.mirror.offsetWidth / 2;

                var MirrorTop = disY - _this.mirror.offsetHeight / 2;

                if (mirrorLeft 
                    ミラー左 = 0;

                }

                else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {

                    ミラー左 = this.offsetWidth - ミラー.オフセット幅;

                }

                if (mirrorTop 
                    ミラートップ = 0;

                }

                else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {

                    ミラートップ = this.offsetHeight - _this.mirror.offsetHeight;

                }

                _this.mirror.style.top = ミラートップ "px";

                _this.mirror.style.left = ミラー左 "px";

                var paX = MirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);
                var paY = MirrorLeft / (this.offsetWidth - _this.mirror.offsetWidth);

                _this.bigImg.style.top = -paX * (_this.bigImg.offsetHeight - _this.bigDiv.offsetHeight) "px";

                _this.bigImg.style.left = -paY * (_this.bigImg.offsetWidth - _this.bigDiv.offsetWidth) "px";

            }

        }

        Magnifier.prototype.$ = 関数 (id) {

            return document.getElementById(id);

        }

        Magnifier.prototype.$Create = 関数 (型) {

            return document.createElement(type);

        }

最後にonload调用下：

复制代代码如下:

window.onload = function () {

            新しい拡大鏡(

                        「拡大鏡」、

                        "images/Magnifier/small.jpg",

                        "images/Magnifier/big.jpg",

                        { "幅": "30px"、"高さ": "30px"、"backgroundColor": "#fff" },

                        { "幅": "250px"、"高さ": "250px" }

                );

        }

以上が本明細書に記載されている内容のすべてです。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。