Css實戰訓練之圖片點擊放大

時間 2019-11-06

標籤 css 實戰訓練圖片點擊放大欄目 CSS 简体版

原文原文鏈接

Css實戰訓練之圖片點擊放大

I. 背景

很是常見的一個功能了，通常網站上顯示的都是縮略圖，等你點擊縮略圖以後，會在一個彈框中顯示放大的圖片css

那麼這個功能是怎麼實現的呢? 正好學習了下css的基礎知識，如今能夠來實際的操做一把html

1. 思路

首先對頁面的結構進行拆分：git

有一個彈窗，在彈窗中顯示大圖；且彈窗默認是隱藏的
主頁面上能夠放置不少圖片，並添加點擊事件
點擊以後，彈窗顯示，並展現大圖
大圖點擊如下後，關閉彈窗

II. 實現

根據上面的描述，咱們先來實現一個基礎版本的，先寫HTMLgithub

<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默認是隱藏的，因此以下（爲了能夠較好的區分彈窗，因此加了背景色和邊框）hexo

<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）
對於圖強中有不少圖片時，點擊放大怎麼作

III. 進階

首先是但願是真的彈窗，不影響既有的佈局，則一般是設置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>