溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“純css如何實現點擊圖片放大”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“純css如何實現點擊圖片放大”吧!
純css實現點擊圖片放大的方法：1、創建一個HTML示例文件；2、設置“<div style='position:fixed'><div class='modal' id='modal'><img id='bgImg' /></div></div>”；3、通過“function showBgImg(e) {...}”方法實現點擊圖片放大效果即可。
Css實戰訓練之圖片點擊放大
非常常見的一個功能了，一般網站上顯示的都是縮略圖，等你點擊縮略圖之后，會在一個彈框中顯示放大的圖片
那么這個功能是怎么實現的呢? 正好學習了下css的基礎知識，現在可以來實際的操作一把
首先對頁面的結構進行拆分：
有一個彈窗，在彈窗中顯示大圖；且彈窗默認是隱藏的
主頁面上可以放置很多圖片，并添加點擊事件
點擊之后，彈窗顯示，并展示大圖
大圖點擊以下后，關閉彈窗
根據上面的描述，我們先來實現一個基礎版本的，先寫HTML
<body>
<!-- 先來實現彈窗 -->
<div class='modal' id='modal'>
<img id='bgImg' />
</div>
<!-- 下面則是主頁內容，先只給幾個圖片 -->
<div>
<img class='thum-img'
src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
</div>
</body>
然后就是添加對應的樣式，要求modal默認是隱藏的，所以如下（為了可以較好的區分彈窗，所以加了背景色和邊框）
<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('modal');
var bgImg = document.getElementById('bgImg');
var thumImg = document.getElementById('thumImg');
thumImg.onclick = function() {
modal.style.display = 'block';
bgImg.src = this.src;
}
bgImg.onclick = function() {
modal.style.display = 'none';
}
</script>
將上面的實現，組裝成一個html之后，直接測試查看
雖然說上面的實現了我們預期的結果，但是有幾點卻不太滿意
不是我們預期的彈窗效果，原圖被擠下去了
彈窗中如果有個放大的動畫效果就更好了（正好可以用到之前學習的animation）
對于圖強中有很多圖片時，點擊放大怎么做
首先是希望是真的彈窗，不影響既有的布局，則通常是設置position來做到, 如我們可以在modal外面再加一層，變成
<div style='position:fixed'>
<div class='modal' id='modal'>
<img id='bgImg' />
</div>
</div>
其次就是彈窗的樣式太丑，我們可以借助之前學習的邊框陰影來實現美觀的彈出效果，
改成圖片全部填充背景
背景顏色去掉，加上陰影，加上白色邊框
修改后的css如下
.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;
}
接下來就是需要把這個變成通用的方案，支持多重圖片的方式了，這個則主要是圖片點擊事件的修改了，將上面寫死的地方，稍微變通一下即可
IV. 源碼
最后給出所有的源碼
<!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='position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)' id='modal'>
<div class='modal' id='modalw'>
<img id='bgImg' />
</div>
</div>
<!-- 下面則是主頁內容，先只給幾個圖片 -->
<div>
<img onclick='showBgImg(this)' class='thum-img'
src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
<img class='thum-img' src='http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef5e886d03f1faaf51f3de666d.jpg' onclick='showBgImg(this)'/>
<img class='thum-img' src='http://g.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcb747b4a5cb2096b63f624a845.jpg' onclick='showBgImg(this)'/>
<img class='thum-img' src='http://c.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d6657856e70c0828381f30fd14.jpg' onclick='showBgImg(this)'/>
<img class='thum-img' src='https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png' onclick='showBgImg(this)'/>
</div>
<script>
var modal = document.getElementById('modal');
var bgImg = document.getElementById('bgImg');
function showBgImg(e) {
modal.style.display = 'block';
bgImg.src = e.src;
}
bgImg.onclick = function() {
modal.style.display = 'none';
}
</script>
</body>
</html>到此，相信大家對“純css如何實現點擊圖片放大”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
