純css怎麼實現點擊圖放大-前端問答-PHP中文網

首頁

web前端

前端問答

純css怎麼實現點擊圖放大

藏色散人

Jan 28, 2023 pm 02:40 PM

css圖片

純css實現點擊圖片放大的方法：1、建立一個HTML範例檔；2、設定「

”；3.透過「function showBgImg(e) {...}」方法實現點擊圖片放大效果即可。

純css怎麼實現點擊圖放大

本教學操作環境：Windows10系統、HTML5&&CSS3版、DELL G3電腦

純css怎麼實現點擊圖片放大？

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

I. 背景

非常常見的一個功能了，一般網站上顯示的都是縮圖，等你點擊縮圖之後，會在一個彈框中顯示放大的圖片

那麼這個功能是怎麼實現的呢? 正好學習了下css的基礎知識，現在可以來實際的操作一把

1. 想法

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

有一個彈窗，在彈窗中顯示大圖；且彈跳窗預設是隱藏的
主頁面上可以放置很多圖片，並添加點擊事件
點擊之後，彈窗顯示，並展示大圖
大圖點擊以下後，關閉彈跳窗

II. 實作

根據上面的描述，我們先來實作一個基礎版本的，先寫HTML

<body>

<!-- 先来实现弹窗 -->
<div class=&#39;modal&#39; id=&#39;modal&#39;>
    <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/622/244/178/1674887775582644.jpg?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;bgImg&#39; / alt="純css怎麼實現點擊圖放大" >
</div>


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

<div>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/622/244/178/1674887775582644.jpg?x-oss-process=image/resize,p_40"  class="lazy"  class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
</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(&#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怎麼實現點擊圖放大

雖然說上面的實現了我們預期的結果，但是有幾點卻不太滿意

不是我們預期的彈窗效果，原圖被擠下去了
彈窗中如果有個放大的動畫效果就更好了（正好可以用到之前學習的animation）
#對於圖強中有很多圖片時，點擊放大怎麼做

III. 進階

首先是希望是真的彈窗，不影響既有的佈局，則通常是設定position來做到, 如我們可以在modal外面再加一層，變成

<div style=&#39;position:fixed&#39;>
    <div class=&#39;modal&#39; id=&#39;modal&#39;>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/742/960/488/1674887791873102.jpg?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;bgImg&#39; / alt="純css怎麼實現點擊圖放大" >
    </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;
}

接下來看示範效果如下

純css怎麼實現點擊圖放大

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

純css怎麼實現點擊圖放大

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=&#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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

html內部的反應：集成了動態網頁的JavaScriptApr 16, 2025 am 12:06 AM

要將React集成到HTML中，需遵循以下步驟：1.在HTML文件中引入React和ReactDOM。 2.定義一個React組件。 3.使用ReactDOM將組件渲染到HTML元素中。通過這些步驟，可以將靜態HTML頁面轉化為動態、交互式的體驗。

反應的好處：性能，可重用性等等Apr 15, 2025 am 12:05 AM

React受歡迎的原因包括其性能優化、組件復用和豐富的生態系統。 1.性能優化通過虛擬DOM和diffing機制實現高效更新。 2.組件復用通過可複用組件減少重複代碼。 3.豐富的生態系統和單向數據流增強了開發體驗。

反應：創建動態和交互式用戶界面Apr 14, 2025 am 12:08 AM

React是構建動態和交互式用戶界面的首選工具。 1)組件化與JSX使UI拆分和復用變得簡單。 2)狀態管理通過useState鉤子實現，觸發UI更新。 3)事件處理機制響應用戶交互，提升用戶體驗。

React與後端框架：比較Apr 13, 2025 am 12:06 AM

React是前端框架，用於構建用戶界面；後端框架用於構建服務器端應用程序。 React提供組件化和高效的UI更新，後端框架提供完整的後端服務解決方案。選擇技術棧時需考慮項目需求、團隊技能和可擴展性。

HTML和React：標記與組件之間的關係Apr 12, 2025 am 12:03 AM

HTML和React的關係是前端開發的核心，它們共同構建現代Web應用的用戶界面。 1)HTML定義內容結構和語義，React通過組件化構建動態界面。 2)React組件使用JSX語法嵌入HTML，實現智能渲染。 3)組件生命週期管理HTML渲染，根據狀態和屬性動態更新。 4)使用組件優化HTML結構，提高可維護性。 5)性能優化包括避免不必要渲染，使用key屬性，保持組件單一職責。

反應與前端：建立互動體驗Apr 11, 2025 am 12:02 AM

React是構建交互式前端體驗的首選工具。 1)React通過組件化和虛擬DOM簡化UI開發。 2)組件分為函數組件和類組件，函數組件更簡潔，類組件提供更多生命週期方法。 3)React的工作原理依賴虛擬DOM和調和算法，提高性能。 4)狀態管理使用useState或this.state，生命週期方法如componentDidMount用於特定邏輯。 5)基本用法包括創建組件和管理狀態，高級用法涉及自定義鉤子和性能優化。 6)常見錯誤包括狀態更新不當和性能問題，調試技巧包括使用ReactDevTools和優

React和前端堆棧：工具和技術Apr 10, 2025 am 09:34 AM

React是一個用於構建用戶界面的JavaScript庫，其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染，優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件，高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當，可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting，保持代碼可讀性和可維護性是最佳實踐。