小さな画像をクリックしたときに更新せずに大きな画像コードが表示されるように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 パッケージング ツールの概要
序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...
この記事では、テーブルのページング効果を実現するためのjQueryの具体的なコードを参考までに紹介し...
Web ページでマスク レイヤーを使用すると、繰り返しの操作を防ぎ、読み込みを促進できます。また、ポ...
目次原理ネットワーク環境の準備インストール前の準備NIS サーバー操作NIS クライアント操作原理N...
1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...
Ubuntu 16.04 FTP サーバーをビルドするftpをインストールするftp をインストール...
この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...
まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...
> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...
序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...
問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...
メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...
この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
データベースの組み込み関数の使用この記事では、主に日付関数、文字列関数、数学関数など、データベースの...
第一に: CSSを導入する4つの方法CSS を導入する方法には、インライン スタイル、埋め込みスタイ...