純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法-フロントエンドQ&A-php.cn

純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法

藏色散人

リリース： 2023-01-28 14:40:34

オリジナル

2357 人が閲覧しました

画像をクリックして拡大するための純粋な CSS メソッド: 1. HTML サンプルファイルを作成します; 2. "

"; 3. 「function showBgImg(e) {...}」メソッドを使用して、画像をクリックすると拡大します。

純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法

このチュートリアルの動作環境: Windows 10 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

純粋な CSS を使用して画像をクリックすると拡大しますか？

CSS の実際のトレーニング画像、クリックして拡大

I. 背景

これは非常に一般的な関数であり、通常は Web サイトに表示されますサムネイルです。サムネイルをクリックすると、ポップアップボックスに拡大された画像が表示されます。

では、この機能はどのように実装されているのでしょうか? CSS の基礎知識を学んだばかりですが、今では次のことができます。実際の操作

1. アイデア

最初にページの構造を分割します:

大きな画像を表示するポップアップウィンドウがあります。ポップアップウィンドウ; ポップアップウィンドウはデフォルトでは非表示になっています
メインページに多くの画像を配置し、クリックイベントを追加できます
クリック後、ポップアップウィンドウが表示され、大きな画像が表示されます
大きな画像をクリック以下の操作が完了したら、ポップアップウィンドウを閉じます

II. 実装

上記の説明に従って、まず基本バージョンを実装し、最初に HTML

<body>

<!-- 先来实现弹窗 -->
<div class=&#39;modal&#39; id=&#39;modal&#39;>
    <img  id=&#39;bgImg&#39; / alt="純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法" >
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
</div>

</body>

ログイン後にコピー

を記述します。次に、対応するスタイルを追加します。これには、デフォルトでモーダルを非表示にする必要があります。次のようにします (ポップを区別しやすくするため)。ウィンドウを開くと、背景色と境界線が追加されます)

<style>
.modal {
    display: none;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: rgb(0, 0, 0, 0.89);
    z-index: 1;
    border: 1px solid rgb(255,255,255,1);
}

.modal>img {
    display: block;
    margin: auto;
    padding: 10%;
    max-width: 60%;
    max-height: 60%;
}

.thum-img {
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}

</style>

ログイン後にコピー

次のステップは、js を使用して実装された大きな画像を表示するロジックをクリックすることです。

<script>
    var modal = document.getElementById(&#39;modal&#39;);
    var bgImg = document.getElementById(&#39;bgImg&#39;);
    var thumImg = document.getElementById(&#39;thumImg&#39;);
    thumImg.onclick = function() {
        modal.style.display = &#39;block&#39;;
        bgImg.src = this.src;
    }

    bgImg.onclick = function() {
        modal.style.display = &#39;none&#39;;
    }
</script>

ログイン後にコピー

上記の実装を HTML にアセンブルした後、直接テストして表示します。デモンストレーションの効果は次のとおりです

純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法

上記は期待どおりの結果が得られましたが、いくつか不満な点があります

##画像内に画像が多い場合、クリックして拡大する方法

まず、既存のレイアウトに影響を与えずに実際のポップアップウィンドウにしたい場合は、通常、私たちが行うように位置を設定することでそれを行います。モーダルの外側に別のレイヤーを追加すると、

<div style=&#39;position:fixed&#39;>
    <div class=&#39;modal&#39; id=&#39;modal&#39;>
        <img  id=&#39;bgImg&#39; / alt="純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法" >
    </div>
</div>

ログイン後にコピー

2 つ目は、ポップアップウィンドウのスタイルが醜すぎることです。前に学習した境界線の影を使用して、次のことを実現できます。美しいポップアップ効果

すべての画像の背景を塗りつぶすように変更します

背景色を削除し、影を追加し、白い境界線を追加します

.modal {
    display: none;
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
    background-color: white;
}

.modal img {
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

ログイン後にコピー

次にアニメーションと拡大効果の追加を検討します

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.modal img {
    animation-name: zoom;
    animation-duration: 0.6s;
}

ログイン後にコピー

次にデモンストレーション効果を見てください。

#次のステップは、これを複数の画像をサポートする汎用ソリューションに変えることです。これは主に画像クリックイベントの変更です。ハードウェアにいくつかの変更を加えるだけです。上記のコード部分純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法

IV. ソースコード純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法

#最後にすべてのソースコードを示します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>小灰灰css学习笔记</title> 
<style>
#modal {
	display: none;
}
.modal {
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
}

.modal img {
    animation-name: zoom;
	animation-duration: 0.6s;
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.thum-img {
    float: left;
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}
</style>
	</head>
<body>
<!-- 先来实现弹窗 -->
<div style=&#39;position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)&#39; id=&#39;modal&#39;>
<div class=&#39;modal&#39; id=&#39;modalw&#39;>
    <img  id=&#39;bgImg&#39; / alt="純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法" >
</div>
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img onclick=&#39;showBgImg(this)&#39; class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
 	<img  class=&#39;thum-img&#39; src=&#39;http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef5e886d03f1faaf51f3de666d.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法" > 
    <img  class=&#39;thum-img&#39; src=&#39;http://g.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcb747b4a5cb2096b63f624a845.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法" >
    <img  class=&#39;thum-img&#39; src=&#39;http://c.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d6657856e70c0828381f30fd14.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法" >
    <img  class=&#39;thum-img&#39; src=&#39;https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png&#39; onclick=&#39;showBgImg(this)&#39;/ alt="純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法" >
</div>

<script>
    var modal = document.getElementById(&#39;modal&#39;);
    var bgImg = document.getElementById(&#39;bgImg&#39;);


    function showBgImg(e) {
		modal.style.display = &#39;block&#39;;
		bgImg.src = e.src;
	}

	bgImg.onclick = function() {
		modal.style.display = &#39;none&#39;;
	}
</script>
</body>
</html>

ログイン後にコピー

は次の学習を推奨しています: "cssビデオチュートリアル

以上が純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。