整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天，我們將學習如何制作一個在懸停時展開和折疊的側邊欄。它看起來很漂亮，實現比看起來簡單得多。我們將逐步完成本教程，并且在此過程中我還將介紹一些值得注意的HTML / CSS技巧。
以下是本文將涉及的提示和技巧列表：
讓我們開始！
可以在此筆中找到此步驟的完整代碼：https://codepen.io/dalisc/pen/rEjRWo
只使用HTML，您的網頁將如下圖所示。一些CSS可以做出什么改變！所以我們需要用一些CSS來設置它，使其看起來像上面的gif。
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
此代碼為側邊欄提供250px（width：250px;）的寬度，背景顏色為深色（background-color：＃111;），并使其在頁面上完全垂直延伸（height：100％;）。在code pen以自定義側邊欄。
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
在這里，我們使用“text-decoration：none;”刪除了文本的下劃線和藍色，并在側邊欄項目周圍添加了填充和塊顯示的一些空格。增強用戶體驗的部分是當項目顏色從灰色變為白色時，這可以通過以下代碼完成：
.sidebar a:hover {
color: #f1f1f1;
}
此代碼表示當您將鼠標懸停在類“側欄”中用<a>標記的元素上時，元素的顏色將更改為您設置的任何顏色，在本例中為＃f1f1f1。
如果您使用Google的素材圖標，您會發現一個令人沮喪的問題：默認情況下，圖標和相鄰文字沒有正確垂直對齊。
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}
你需要做的是在CSS中垂直對齊它們（vertical-align：middle;）。即使這樣，對齊也有點偏離，所以在此之后給你的圖標一個3px垂直增強（padding-bottom：3px;）。
現在我們將添加一些Javascript，因為我們將在側邊欄中引入一些功能。可以在此筆中找到此步驟的完整代碼
兩個非常有用的事件是onmouseover和onmouseout，它們分別檢測您的鼠標是否懸停在特定元素之上或之外。對于我們的側邊欄，我們希望檢測位于側邊欄的任何部分，因此我們需要將這些事件添加到側邊欄的<div>中，如下所示：
<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>
現在，我們可以決定鼠標懸停在側邊欄上或從邊欄懸停的情況。我們需要將“ somethinghappens”替換為我們想要實際發生的事情，但首先，讓我們通過向控制臺發送消息來檢查是否發生了檢測。
現在讓我們編寫兩個Javascript函數來確認檢測到事件：
function testIn() {
console.log(“hovering in sidebar”);
}
function testOut() {
console.log(“hovering outside sidebar”);
}
更新我們的側邊欄：
<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>
現在進行懸停并檢查控制臺以查找我們編寫的消息。它應該可以工作了！我們已經設置了告訴側邊欄是折疊還是展開所需的檢測。
可以在此筆中找到此最終部分的完整代碼：https：//codepen.io/dalisc/pen/qzRGxQ
我們將折疊邊欄稱為迷你側邊欄。我們現在想要根據鼠標是否懸停在我的側邊欄上進行兩次查找，因此我們需要在javascript部分中創建一個布爾變量mini。
我們還將創建一個函數來切換側邊欄的擴展。該功能的邏輯如下：如果側邊欄處于迷你模式，將鼠標懸停在側邊欄上會將側邊欄擴展為其完整模式（并將變量mini設置為false）。如果側邊欄處于完全模式，將鼠標懸停在側邊欄上會將其折疊為迷你模式（并將變量mini設置為true）。
因此，我們需要更改onmouseover和onmouseout事件，并相應地引入新函數toggleSidebar（）。
更改html：
<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>
添加到JS（我們現在可以刪除testIn()和testOut()）：
var mini = true;
function toggleSidebar() {
if (mini) {
console.log(“opening sidebar”);
document.getElementById(“mySidebar”).style.width = “250px”;
document.getElementById(“main”).style.marginLeft = “250px”;
this.mini = false;
} else {
console.log(“closing sidebar”);
document.getElementById(“mySidebar”).style.width = “100px”;
document.getElementById(“main”).style.marginLeft = “100px”;
this.mini = true;
}
}
從功能中可以看出，它基本上都是改變側邊欄黑色塊的寬度。完整模式的寬度為250px，迷你模式的寬度為85px。我們還策略性地定位文本和圖標，以便在側邊欄折疊時完全隱藏文本，僅顯示圖標。
默認情況下，我們希望側邊欄處于迷你模式，因此我們也將側邊欄的寬度（最初未被遮擋時）更改為85px。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
}
當前默認外觀：
此時，文本溢出仍有一些問題，所以我將介紹一些CSS提示和技巧！
將“white-space：nowrap;”添加到側欄CSS。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
white-space: nowrap;
}
即使文本大于側邊欄的寬度，這也會阻止文本換行到下一行。但正如你在下面看到的那樣，雖然它現在在一行中，它會溢出，你可以看到溢出...所以我們需要找到隱藏它的方法！
s
要隱藏溢出的文本，只需將“overflow-x：hidden;”和“z-index：1;”添加到側邊欄css即可。這將隱藏任何寬于側邊欄寬度的內容。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
現在我們的側邊欄看起來非常好！（我也改變了主要內容，但主要內容未在本教程中介紹，它包含在code pen。）
現在我們已經遇到了我們需要修復的最后一個小故障，以使側邊欄順利移動。目前，隨著側邊欄折疊和展開，沒有動畫添加到它，所以它看起來有點不連貫，像這樣：
所以我們想要的是一個非常平滑的過渡，如第一頁上的gif所示。現在，變化立即發生。為了順利，我們需要減緩變化。首先，我們需要讓側邊欄擴展得更慢，比方說0.5秒。將其添加到側邊欄CSS。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
white-space: nowrap;
}
我們還需要將主要部分同時推到左側。
#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 85px;
}
你有一個漂亮的側邊欄！
在GitHub存儲庫中找到完整的工作代碼：https：//github.com/dalisc/hover-collapsible-sidebar
轉：https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1
今日小知識】：div和span的作用及用法，希望可以幫到正在學習HTML的你噢~~~
一般用于配合css完成網頁基本布局。<div>標簽可定義文檔中的分區或節 。可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。如果用 id 或 class 來標記 ，那么該標簽的作用會變得更加有效。class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識單獨的唯一的元素。class可以在頁面里面重復使用，id由于在頁面里面只能出現一次，所以不能重復使用，所以盡量用class來寫，這樣能在頁面里面重復引用你寫的css，減小工作量和代碼量。
一般用于配合css修改網頁中的一些局部信息。它其實就是用來組合文檔中的行內元素，也就是將內容放在span標簽之中。span沒有固定的格式表現，如果需要，可以添加屬性來表現形式
1.div標簽會獨占一行，span標簽不會。
2.div是一個容器級別的標簽，span是一個文本級別的標簽。
3.div基本上與span相似，或者說具有span所有的功能，此外還具有span不及的特色。div是一個塊，也就是所謂的"容器"，它具有自己獨立的段落，獨立的標題，獨立的表格。
4.div是一個塊級元素，可以包含段落、標題、表格，乃至諸如章節、摘要和備注等。而span是行內元素，span的前后是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用span。
容器級別標簽可以嵌套所有標簽，文本級別標簽只可以嵌套文字/超鏈接/圖片。
div h ul ol dl li dt dd …
span p buis strong em ins del….
希望以上內容可以幫助到在學習HTML的你們噢~~~如有補充可以私聊我噢~~~我們一起學習~~~
js圖片局部放大鏡效果
---
**引言：增強用戶體驗，打造沉浸式商品展示**
在電子商務和各類產品展示網站中，圖片局部放大功能是一項極其實用且能顯著提升用戶體驗的設計。通過JavaScript實現圖片局部放大的放大鏡效果，可以讓用戶在不離開頁面的情況下查看產品的細節，從而促進購買決策。本文將深入淺出地介紹如何利用原生JavaScript創建一個簡單的圖片局部放大鏡效果，并附上詳細的代碼實現步驟。
---
**【第一部分】HTML布局與樣式基礎**
**標題：搭建基礎框架，預留交互空間**
首先，我們需要在HTML中設置好圖片容器以及放大鏡區域的基本結構：
```html
<div id="magnify-container">
<img id="product-image" src="your-image-source.jpg" alt="Product Image">
<div id="magnifier">
<div id="magnified-view"></div>
</div>
</div>
```
配合CSS初步設置放大鏡樣式，確保放大鏡可覆蓋在圖片之上：
```css
#magnify-container {
position: relative;
}
#product-image {
width: 100%;
height: auto;
}
#magnifier {
position: absolute;
border: 1px solid #ccc;
width: 200px; /* 放大鏡寬度 */
height: 200px; /* 放大鏡高度 */
display: none;
cursor: none;
}
#magnified-view {
width: 100%;
height: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
```
---
**【第二部分】JavaScript事件監聽與坐標計算**
**標題：捕獲鼠標移動，精準定位放大區域**
在JavaScript中，我們將添加事件監聽器來追蹤鼠標在圖片上的位置，并據此更新放大鏡及其內部視圖的位置：
```javascript
const productImage = document.getElementById('product-image');
const magnifier = document.getElementById('magnifier');
const magnifiedView = document.getElementById('magnified-view');
productImage.addEventListener('mousemove', (e) => {
const rect = productImage.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 更新放大鏡顯示位置
magnifier.style.display = 'block';
magnifier.style.left = `${x - magnifier.offsetWidth / 2}px`;
magnifier.style.top = `${y - magnifier.offsetHeight / 2}px`;
// 計算并更新放大視圖背景圖像的位置與縮放比例
const scale = magnifier.offsetWidth / productImage.offsetWidth;
const bgX = -((x * scale) - magnifier.offsetWidth / 2);
const bgY = -((y * scale) - magnifier.offsetHeight / 2);
magnifiedView.style.backgroundPosition = `${bgX}px ${bgY}px`;
magnifiedView.style.backgroundSize = `${productImage.offsetWidth * scale}px`;
});
```
---
**【第三部分】響應鼠標進出與觸屏設備兼容性**
**標題：增強交互體驗，確保多設備適用**
為了使放大鏡效果在鼠標移入/移出時正常切換顯示與隱藏，并考慮到觸屏設備的兼容性，我們可以增加mouseenter、mouseleave或touchstart、touchend事件處理：
```javascript
productImage.addEventListener('mouseenter', () => {
magnifier.style.display = 'block';
});
productImage.addEventListener('mouseleave', () => {
magnifier.style.display = 'none';
});
// 對于觸屏設備
if ('ontouchstart' in window) {
productImage.addEventListener('touchstart', (e) => {
if (!magnifier.classList.contains('active')) {
magnifier.classList.add('active');
}
});
productImage.addEventListener('touchmove', (e) => {
// 使用之前的mousemove事件處理函數邏輯
// 注意取消默認行為防止頁面滾動
e.preventDefault();
// ...
});
productImage.addEventListener('touchend', () => {
magnifier.classList.remove('active');
magnifier.style.display = 'none';
});
}
```
---
**【第四部分】性能優化與擴展功能**
**標題：提升性能，引入過渡動畫與自定義放大倍數**
為了進一步提升用戶體驗，我們可以添加過渡動畫和允許用戶自定義放大倍數的功能：
```javascript
// CSS中加入過渡效果
#magnifier {
transition: all 0.2s ease-out;
}
// JavaScript中增加放大倍數變量
const zoomScale = 3; // 默認放大倍數
// 更新放大視圖背景尺寸計算
magnifiedView.style.backgroundSize = `${productImage.offsetWidth * zoomScale}px`;
// 用戶自定義放大倍數
document.getElementById('zoom-slider').addEventListener('input', (e) => {
zoomScale = parseFloat(e.target.value);
magnifiedView.style.backgroundSize = `${productImage.offsetWidth * zoomScale}px`;
});
```
---
**結語：實戰演練，精進前端技能**
通過上述步驟，我們已經成功實現了基于原生JavaScript的圖片局部放大鏡效果。這一實踐不僅展示了JavaScript在前端交互設計中的強大能力，也提醒我們始終關注用戶體驗，用技術手段不斷提升網站品質。后續還可在此基礎上增加更多個性化功能，如平滑滾動、縮放限制等，以滿足不同場景下的需求。不斷探索創新，讓你的前端作品更具吸引力與實用性。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
