小さな画像をクリックしたときに更新せずに大きな画像コードが表示されるようにLightboxを実現するためにCSSを使用する

小さな画像をクリックしたときに更新せずに大きな画像コードが表示されるようにLightboxを実現するためにCSSを使用する

小さな画像をクリックしたときに更新せずに大きな画像コードが表示されるように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 パッケージング ツールの概要

推薦する

Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...

開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...

Dockerコンテナにvimコマンドがない問題を解決する方法

問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...

Docker イメージの最適化 (1.16GB から 22.4MB)

目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...

Web ページのデザインを学ぶときに習得すべきコードは何ですか?

この記事では、Web ページ制作を学ぶ過程で習得すべきテクニックの一部を詳しく紹介します。これらの内...

HTMLファイルとは何ですか?HTMLファイルを開く方法

HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...

Docker-compose を使用して Django アプリケーションをオフラインでデプロイする方法

目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...

mysql5.7.20 のインストールと設定方法のグラフィック チュートリアル (mac)

MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...

mysql5.7 以降で my.ini を設定するための詳細な手順

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...

MySQL における単一テーブルと複数テーブル、およびビューと一時テーブルに対する Update と Select の違い

1. テーブルAのデータを使用してMySQLのテーブルBの内容を更新するたとえば、データ テーブル内...

Vueでドラッグ可能なコンポーネントを実装する方法

この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...

MySQL 8.0.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

CSS 3.0 テキストホバージャンプ特殊効果コード

これは、CSS 3.0 で実装されたテキストのホバーとジャンプ効果です。効果は次のとおりです。 以下...

雨滴効果を実現する JavaScript キャンバス

この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...

要素UIポップアップコンポーネントをカプセル化する手順

el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...