js を使用して、小さな画像をクリックして大きな画像を表示する効果を実現するにはどうすればよいですか? (コード例)

この記事では、小さな画像をクリックして大きな画像を表示するjs、つまり、小さな画像をクリックして大きな画像をプレビューするjsの実装方法を主に紹介します。 この機能を実装すると、必然的にこのような要件が発生します。ウェブサイトの構築プロセス。特に画像が多いWebサイトではサムネイルの表示は非常に重要なので、小さい画像を直接クリックして大きい画像をプレビューできればさらに効率よく表示できます。画像をクリックすると拡大されますので、jsの操作は難しくありません。ここでは具体的なコードのデモを示します。

js の小さな画像をクリックすると、大きな画像がポップアップします。 具体的なコード例は次のとおりです。

<div>
    <img  class="dialog lazy"  src="/static/imghw/default1.png"  data-src="1.png"    alt="js を使用して、小さな画像をクリックして大きな画像を表示する効果を実現するにはどうすればよいですか? (コード例)" >
    <div id="dialog_large_image"></div>
</div>

<script type="text/javascript">
    $(function () {
        $("img.dialog").click(function() {
            var large_image = &#39;<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/139/183/406/1533975118964938.png"  class="lazy"  src= &#39; + $(this).attr("src") + &#39;</img alt="js を使用して、小さな画像をクリックして大きな画像を表示する効果を実現するにはどうすればよいですか? (コード例)" >&#39;;
            $(&#39;#dialog_large_image&#39;).html($(large_image).animate({ height: &#39;50%&#39;, width: &#39;50%&#39; }, 500));
        });
    });
</script>

ここで理解すべき知識点は、jQuery イベント - click() メソッドです。

要素をクリックすると、クリックイベントが発生します。

マウス ポインターが要素の上に留まり、マウスの左ボタンが押されて放されると、クリックが発生します。

click() メソッドは、クリック イベントをトリガーするか、クリック イベントの発生時に実行する関数を指定します。

この記事ではjsの関連知識を紹介します。サムネイルをクリックすると大きな画像に切り替わります。困っている友人の役に立てば幸いです。

【おすすめ関連記事】

ボタンクリック後に画像を自動で切り替える簡単なメソッドをJSで実装

モバイル端末上で画像をクリックすると大きく表示される特殊効果を実現するjquery picture_jquery

JS 小さな画像の関連付けをクリックして大きな画像を表示

JS を使用して画像のクリックサイクル切り替えを実現します (コード付き)

以上がjs を使用して、小さな画像をクリックして大きな画像を表示する効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。