整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天，我们将学习如何制作一个在悬停时展开和折叠的侧边栏。它看起来很漂亮，实现比看起来简单得多。我们将逐步完成本教程，并且在此过程中我还将介绍一些值得注意的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小时内与您取得联系。
