目录
1. 菜单栏
实现思路：
1.首先，需要编写HTML和CSS代码来创建导航栏菜单和下拉菜单的样式。在下拉菜单中，需要为每个下拉菜单项创建一个列表项，并使用CSS将其隐藏起来。
2.使用JavaScript编写代码来监听导航菜单的鼠标事件。例如，可以使用mouseover和mouseout事件来检测鼠标指针是否进入或离开导航菜单的区域。
3.当鼠标指针进入导航菜单时，可以使用JavaScript来显示下拉菜单。可以使用CSS的display属性将下拉菜单设置为可见，并将其位置设置为与导航菜单项对齐。
4.当鼠标指针离开导航菜单时，可以使用JavaScript来隐藏下拉菜单。可以再次使用CSS的display属性来将下拉菜单设置为隐藏，并将其位置为不可见。
1.1 HTML代码
<nav>
<ul>
<li>
<a href="#">主菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li>
<a href="#">主菜单2</a>
<ul>
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
<li><a href="#">子菜单6</a></li>
</ul>
</li>
<li><a href="#">主菜单3</a></li>
</ul>
</nav>1.2 CSS代码
主菜单样式：让主菜单都在一行
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 主菜单1和主菜单2以及主菜单3在同一行 */
nav li {
display: inline-block;
position: relative;
}子菜单隐藏
nav li ul {
width: 100%;
display: none;
position: absolute;
top: 100%;
left: 0;
}CSS解决方法
nav li:hover > ul {
display: block;
}其他样式
nav a {
display: block;
padding: 10px;
background-color: #eee;
text-decoration: none;
color: #333;
}
nav ul{
background-color: #fff;
border: 1px solid #ccc;
}1.3 JavaScript代码
//获取所有的主菜单
var navItems = document.querySelectorAll('nav li');
// 给每个导航菜单项添加鼠标事件监听器
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('mouseover', showSubMenu);
navItems[i].addEventListener('mouseout', hideSubMenu);
}
function showSubMenu() {
//判断主菜单下是否有子菜单
if (this.children.length > 1) {
this.children[1].style.display = 'block';
}
}
function hideSubMenu() {
if (this.children.length > 1) {
this.children[1].style.display = 'none';
}
}2. 轮播图
在JavaScript中实现轮播图的原理，主要是通过控制CSS样式和DOM元素来实现的。
具体实现步骤如下：
1.在HTML中，创建轮播图的HTML结构，并添加相应的CSS样式，用来控制轮播图的位置、大小等。轮播图通常是一个容器元素，其中包含多个轮播项元素，每个轮播项元素包含要展示的图片或内容等。
2.在JavaScript中，添加定时器或事件监听器来触发轮播图的切换。比如，可以设置一个定时器来定时切换轮播项，或者在用户点击轮播图的控制按钮触发事件。
3.在事件处理程序中，通过JavaScript控制CSS样式和DOM元素，将当前轮播项隐藏，将下一个轮播项显示出来，以达到轮播切换的效果。可以使用display属性或者opacity和transform等属性来控制轮播项的显示和隐藏，并通过JavaScript来控制轮播项的索引位置。
4.可以使用CSS3动画和过渡效果等，以实现更加丰富的轮播效果。比如，可以使用transition属性来控制轮播项的渐变过渡效果，或者使用animation属性来控制轮播项的旋转或缩放动画效果等。
5.可以添加轮播图的控制按钮，比如上一页、下一页、点状导航等，以方便用户进行轮播项的切换。在JavaScript中，需要添加事件监听器来响应用户的点击事件，并根据不同的控制按钮来切换不同的轮播项。
2.1 HTML代码
<div class="slideshow-container">
<div class="slideshow-slide">
<img src="image/1/8.jpg" alt="图片1">
</div>
<div class="slideshow-slide">
<img src="image/1/3.jpg" alt="图片2">
</div>
<div class="slideshow-slide">
<img src="image/1/4.jpg" alt="图片3">
</div>
<div class="slideshow-slide">
<img src="image/1/9.jpg" alt="图片4">
</div>
<a class="prev" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">❯</a>
</div>2.2 CSS代码
<style>
.slideshow-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;/* 隐藏溢出 清除浮动 解决坍塌*/
}
.slideshow-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* 完全透明 */
transition: opacity 0.5s ease-in-out;/* 动画效果 */
}
.slideshow-slide.active {
opacity: 1; /* 完全可见 */
}
.slideshow-slide img {
width: 100%;
height: 100%;
object-fit: cover;/* 防止图片挤压变形 */
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #fff;
cursor: pointer;
z-index: 1;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>2.3 JavaScript代码
<script>
// 获取存放图片的div
var slides = document.querySelectorAll('.slideshow-slide');
//当前为0
var currentSlide = 0;
// 自动轮播
var slideInterval = setInterval(nextSlide, 1000);
// 手动切换
function changeSlide(n) {
clearInterval(slideInterval);
currentSlide += n;
if (currentSlide >= slides.length) {
currentSlide = 0;
} else if (currentSlide < 0) {
currentSlide = slides.length - 1;
}
showSlide(currentSlide);
}
// 显示当前轮播项
function showSlide(n) {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[n].classList.add('active');
}
// 下一张轮播图
function nextSlide() {
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
showSlide(currentSlide);
}
</script>3. 模态框
在JavaScript中实现模态框的原理，主要是通过控制CSS样式和DOM元素来实现的。
具体实现步骤如下：
1.在HTML中，创建模态框的HTML结构，并添加相应的CSS样式，使其隐藏在页面中，等待触发。
2.在JavaScript中，添加事件监听器来触发模态框的显示。比如，可以在点击某个按钮时触发事件，通过修改CSS样式来显示模态框。
3.在事件处理程序中，通过JavaScript控制CSS样式，将模态框显示在屏幕中央，同时将背景屏幕设置为不可用状态。
4.可以使用display属性来控制模态框的显示和隐藏，也可以使用opacity和transform属性等控制透明度和位置等，以达到更好的视觉效果。
5.当用户完成模态框中的操作后，可以通过JavaScript控制CSS样式，将模态框隐藏，同时将背景屏幕还原为可用状态。
3.1 HTML代码
<div class="modal" id="myModal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>模态框头部</h2>
</div>
<div class="modal-body">
<p>主要内容</p>
<p>其它内容</p>
</div>
<div class="modal-footer">
<h3>模态框底部</h3>
</div>
</div>
</div>
<button id="myBtn">打开模态框</button>3.2 CSS代码
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>3.3 JavaScript代码
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>4. 侧边固定栏
实现侧边栏固定的原理，主要是通过滚动监听技术和CSS样式控制来实现的。
具体实现步骤如下：
1.获取需要固定的侧边栏元素的位置，获取元素在视口中的位置信息。
2.监听页面滚动事件，通过window.addEventListener('scroll',callback)方法添加滚动监听事件，回调函数中获取滚动距离。
3.判断当前滚动距离是否大于等于需要固定的侧边栏元素在视口中的位置信息中的top值，如果是，则添加一个类名或者改变样式，使其固定在页面的特定位置上，否则就去除该类名或样式，还原原来的位置。
4.1 HTML代码
<div class="container">
<div class="content">
<h2>主要内容区域</h2>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
<p>这里是页面的主要内容区域。</p>
</div>
<div class="sidebar">
<div class="sidebar-item">
<h3>侧边固定栏</h3>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
<div class="sidebar-item">
<h3>联系方式</h3>
<p>电话：123456789</p>
<p>邮箱：example@example.com</p>
</div>
<div class="sidebar-item">
<h3>广告</h3>
</div>
</div>
</div>4.2 CSS代码
<style>
.container {
display: flex;
flex-direction: row;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.content {
width: 70%;
}
.sidebar {
position: fixed;
top: 80px;
right: 50px;
width: 25%;
}
.sidebar-item {
margin-bottom: 30px;
}
.sidebar-item h3 {
margin-bottom: 10px;
}
.sidebar-item ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-item li {
margin-bottom: 10px;
}
.sidebar-item li a {
color: #333;
text-decoration: none;
}
.sidebar-item li a:hover {
color: #666;
}
</style>4.3 JavaScript代码
<script>
//获取侧边栏
var sidebar = document.querySelector('.sidebar');
//元素到顶部的距离
var sidebarTop = sidebar.offsetTop;
//内容页自身的高度
var contentHeight = document.querySelector('.content').offsetHeight;
//添加事件
window.addEventListener('scroll', function() {
//在垂直方向已滚动的像素值
var scrollPos = window.scrollY;
if (scrollPos >= sidebarTop && scrollPos <= (contentHeight - sidebar.offsetHeight)) {
sidebar.classList.add('fixed');
} else {
sidebar.classList.remove('fixed');
}
});
</script>
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
