小さな画像をクリックしたときに更新せずに大きな画像コードが表示されるようにLightboxを実現するためにCSSを使用する コード紹介: CSS の「Lightbox」は、小さな画像をクリックすると更新せずに大きな画像を表示できる人気の画像表示技術です。 Discuz フォーラムにもこの機能はありますが、こちらも JS を使っているようです。こちらは JS を使わず、完全に純粋な CSS で実装されています。これも使い勝手が非常に良いです。画像の境界線とサイズは、Web ページのレイアウトに合わせて設定する必要があります。これは単なるデモンストレーションであり、Web ページにぴったり合うとは限りません。 コードの内容: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <ヘッド> <title>CSS を使用して Lightbox を防ぎ、小さな画像をクリックしても更新せずに大きな画像を表示するコードを実現する - www.webdm.cn</title> <スタイル> .black_overlay{ 表示: なし; 位置: 絶対; トップ: 0%; 残り: 0%; 幅: 100%; 高さ: 100%; 背景色: 白; zインデックス:1001; -moz-不透明度: 0.8; 不透明度:.80; フィルター: アルファ(不透明度=80); } .white_content { 表示: なし; 位置: 絶対; 上位: 25% 左: 25%; 幅: 46%; 高さ: 50%; パディング: 13px; 境界線: 16px 実線オレンジ; 背景色: 白; zインデックス:1002; オーバーフロー:自動; } .codefans_net { 幅:420ピクセル; 高さ:210px; 背景色:#efefef; 色:#666; 境界線の幅:1px; 境界線の色:#999; 境界線スタイル:solid; マージン:6px; パディング:6px; フォントサイズ:14px; 行の高さ:200%; float:ミッドデン; } </スタイル> </head> <本文> <p class="codefans_net">CSS の「Lightbox」は、小さな画像をクリックすると更新せずに大きな画像を表示する機能を実現できる人気の画像表示技術です。この効果がよくわからない方は、下の画像をクリックするとわかります! <br> <a href = "javascript:void(0)" onclick = "document.getElementById ('light').style.display='block';document.getElementById('fade').style.display='block'"><img border="0" src="upload/2022/web/demoimgsmall.jpg" 幅="100" 高さ="62"></a> <div id="light" class="white_content"> <a target="_blank" href="/"> <img border="0" src="upload/2022/web/demoimg.jpg" width="350" height="216"></a> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById ('fade').style.display='none'">閉じる</a></div> <div id="fade" class="black_overlay"></div></p> </本文> </html> <br /> <p><a href="http://www.webdm.cn">Web Code Station</a> - 最もプロフェッショナルな Web コードのダウンロード! </p> 要約する 上記は、CSS アンチライトボックスを使用して、小さい画像をクリックしても更新せずに大きい画像を表示するコードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: アリババの中秋節ロゴとウェブサイトのデザインプロセス
>>: Spring Boot Docker パッケージング ツールの概要
目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...
序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...
問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...
目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...
この記事では、Web ページ制作を学ぶ過程で習得すべきテクニックの一部を詳しく紹介します。これらの内...
HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...
目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...
MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...
Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...
1. テーブルAのデータを使用してMySQLのテーブルBの内容を更新するたとえば、データ テーブル内...
この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...
この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...
これは、CSS 3.0 で実装されたテキストのホバーとジャンプ効果です。効果は次のとおりです。 以下...
この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...
el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...