本篇內(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)擊圖片放大”吧!

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出大悟免費(fèi)做網(wǎng)站回饋大家。

純css實(shí)現(xiàn)點(diǎn)擊圖片放大的方法：1、創(chuàng)建一個(gè)HTML示例文件；2、設(shè)置“

”；3、通過(guò)“function showBgImg(e) {...}”方法實(shí)現(xiàn)點(diǎn)擊圖片放大效果即可。

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

I. 背景

非常常見(jiàn)的一個(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

   






      src='/upload/otherpic60/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />

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

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

將上面的實(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外面再加一層，變成

其次就是彈窗的樣式太丑，我們可以借助之前學(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. 源碼

最后給出所有的源碼

	




   







      src='/upload/otherpic60/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
	
   
   
   

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