溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

純css如何實(shí)現(xiàn)點(diǎn)擊圖片放大

發(fā)布時(shí)間：2023-01-30 09:31:35 來(lái)源：億速云 閱讀：245 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“純css如何實(shí)現(xiàn)點(diǎn)擊圖片放大”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“純css如何實(shí)現(xiàn)點(diǎn)擊圖片放大”吧!

純css實(shí)現(xiàn)點(diǎn)擊圖片放大的方法：1、創(chuàng)建一個(gè)HTML示例文件；2、設(shè)置“<div style='position:fixed'><div class='modal' id='modal'><img id='bgImg' /></div></div>”；3、通過(guò)“function showBgImg(e) {...}”方法實(shí)現(xiàn)點(diǎn)擊圖片放大效果即可。

Css實(shí)戰(zhàn)訓(xùn)練之圖片點(diǎn)擊放大

I. 背景

非常常見的一個(gè)功能了，一般網(wǎng)站上顯示的都是縮略圖，等你點(diǎn)擊縮略圖之后，會(huì)在一個(gè)彈框中顯示放大的圖片

那么這個(gè)功能是怎么實(shí)現(xiàn)的呢? 正好學(xué)習(xí)了下css的基礎(chǔ)知識(shí)，現(xiàn)在可以來(lái)實(shí)際的操作一把

1. 思路

首先對(duì)頁(yè)面的結(jié)構(gòu)進(jìn)行拆分：

  • 有一個(gè)彈窗，在彈窗中顯示大圖；且彈窗默認(rèn)是隱藏的

  • 主頁(yè)面上可以放置很多圖片，并添加點(diǎn)擊事件

  • 點(diǎn)擊之后，彈窗顯示，并展示大圖

  • 大圖點(diǎn)擊以下后，關(guān)閉彈窗

II. 實(shí)現(xiàn)

根據(jù)上面的描述，我們先來(lái)實(shí)現(xiàn)一個(gè)基礎(chǔ)版本的，先寫HTML

<body>

<!-- 先來(lái)實(shí)現(xiàn)彈窗 -->
<div class='modal' id='modal'>
    <img id='bgImg' />
</div>


<!-- 下面則是主頁(yè)內(nèi)容，先只給幾個(gè)圖片 -->

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

</body>

然后就是添加對(duì)應(yīng)的樣式，要求modal默認(rèn)是隱藏的，所以如下（為了可以較好的區(qū)分彈窗，所以加了背景色和邊框）

<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>

接下來(lái)就是點(diǎn)擊顯示大圖的邏輯了，借助js來(lái)實(shí)現(xiàn)，

<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>

將上面的實(shí)現(xiàn)，組裝成一個(gè)html之后，直接測(cè)試查看

雖然說(shuō)上面的實(shí)現(xiàn)了我們預(yù)期的結(jié)果，但是有幾點(diǎn)卻不太滿意

  • 不是我們預(yù)期的彈窗效果，原圖被擠下去了

  • 彈窗中如果有個(gè)放大的動(dòng)畫效果就更好了（正好可以用到之前學(xué)習(xí)的animation）

  • 對(duì)于圖強(qiáng)中有很多圖片時(shí)，點(diǎn)擊放大怎么做

III. 進(jìn)階

首先是希望是真的彈窗，不影響既有的布局，則通常是設(shè)置position來(lái)做到, 如我們可以在modal外面再加一層，變成

<div style='position:fixed'>
    <div class='modal' id='modal'>
        <img id='bgImg' />
    </div>
</div>

其次就是彈窗的樣式太丑，我們可以借助之前學(xué)習(xí)的邊框陰影來(lái)實(shí)現(xiàn)美觀的彈出效果，

  • 改成圖片全部填充背景

  • 背景顏色去掉，加上陰影，加上白色邊框

修改后的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;
}

接下來(lái)考慮添加動(dòng)畫，加上一個(gè)放大的效果

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

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

接下來(lái)就是需要把這個(gè)變成通用的方案，支持多重圖片的方式了，這個(gè)則主要是圖片點(diǎn)擊事件的修改了，將上面寫死的地方，稍微變通一下即可

IV. 源碼

最后給出所有的源碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>小灰灰css學(xué)習(xí)筆記</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>
<!-- 先來(lái)實(shí)現(xiàn)彈窗 -->
<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>


<!-- 下面則是主頁(yè)內(nèi)容，先只給幾個(gè)圖片 -->

<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>

到此，相信大家對(duì)“純css如何實(shí)現(xiàn)點(diǎn)擊圖片放大”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手