前端 | 一个导航栏点击滑动切换框架
发布时间：2023年12月20日
📚目标效果
- 鼠标滚轮上下滑动切换。
- 导航栏点击切换。
- 侧边栏小圆点点击切换。
📚HTML
-
基本框架就是head头部导航栏+content内容区域。
-
其中content里头套列表，每个列表对应一个切换页面。
-
加/减角度就在head里和content里添加
li。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搭个房子~</title> <link rel="stylesheet" href="./assects/css/style.css"> </head> <body> <header id="head"> <section class="wrap"> <h1 class="logo"> <a href="javascript:;"><img src="./assects/images/logo.png" alt="logo位"/></a> </h1> <ul class="nav"> <li class="active"><a href="javascript:;">角度1</a></li> <li><a href="javascript:;">角度2</a></li> <li><a href="javascript:;">角度3</a></li> <li><a href="javascript:;">角度4</a></li> <li><a href="javascript:;">角度5</a></li> </ul> </section> </header> <section id="content"> <ul class="list"> <!-- 第一页 --> <li class="home1"> </li> <!-- 第二页 --> <li class="home2"> </li> <!-- 第三页 --> <li class="home3"> </li> <!-- 第四页 --> <li class="home4"> </li> <!-- 第五页 --> <li class="home5"> </li> </ul> <!-- 侧边原点 --> <ul class="point"> <li class="active"><a href="javascript:;"title="角度1"></a></li> <li><a href="javascript:;"title="角度2"></a></li> <li><a href="javascript:;"title="角度3"></a></li> <li><a href="javascript:;"title="角度4"></a></li> <li><a href="javascript:;"title="角度5"></a></li> </ul> </section> </body> <script src="./assects/js/script.js"></script> </html>
📚CSS
- 重置样式：对页面中各个元素的默认样式进行重置，包括设置页面的高度为100%、禁止页面的滚动条、去除各元素的内外边距、设置默认的字体等。
html,body{height: 100%;overflow: hidden;} html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "SimHei";} a{text-decoration: none;display: block;color: black;} li{list-style: none;} img{display: block;} - 头部样式：定义了页面的头部样式，包括了头部的宽度、高度、背景颜色等，以及logo和导航的布局样式。
#head{position: absolute; width: 100%;height: 60px;background: #ebebe3;overflow: hidden; z-index: 2;} #head .wrap{width: 980px;height: 60px;margin: auto;} #head .wrap .logo{float: left;margin: 0;} #head .wrap .nav{float: right;} #head .wrap .nav > li{float: left;width: 90px; line-height: 60px;text-align: center;white-space: nowrap;} #head .wrap .nav > .active a{background:#a04c3b;color: #f5f2e9;} #head .wrap .nav > li a:hover{background:#a04c3b;color: #f5f2e9;} - 右侧点击栏：定义了页面右侧的点击栏样式，包括了位置、宽度、高度、边框样式和过渡效果等。
#content .point{position: fixed;width: 10px;top: 50%;right: 15px;z-index: 3;} #content .point > li a{float: left;width: 10px;height: 10px;border: 1px solid #a04c3b;border-radius: 50%;margin-bottom: 7px;transition: 1s background;} #content .point > .active a{background: #a04c3b;} #content .point > li a:hover{background: #a04c3b;} - 页面内容部分
/* 页面内容部分样式定义 */ #content{position: absolute;top: 60px; width: 100%; overflow: hidden; } #content .list{position: absolute;left: 0;top: 0;width: 100%;height: 100%; transition:1s top;} /* 页面中各个页面的背景图片样式，以及置中显示 */ /*第一页*/ #content .list > .home1{background: url(../images/background.jpg) center;} /*第二页*/ #content .list > .home2{background: url(../images/background.jpg) center;} /*第三页*/ #content .list > .home3{background: url(../images/background.jpg) center;} /*第四页*/ #content .list > .home4{background: url(../images/background.jpg) center;} /*第五页*/ #content .list > .home5{background: url(../images/background.jpg) center;}
📚Script
页面的滚动和导航功能，包括滚轮事件和头部导航的点击事件等。
window.onload = function (){
// 初始化变量和获取元素对象
var content = document.querySelector("#content");
var cList = document.querySelector("#content .list");
var cLiNodes = document.querySelectorAll("#content .list > li");
var head = document.querySelector("#head");
var nList = document.querySelectorAll("#head .wrap .nav > li");
var pList = document.querySelectorAll("#content .point > li");
var now = 0;
var timer = 0;
var preIndex = 0;
//监听鼠标滚轮事件
if(content.addEventListener){
content.addEventListener("DOMMouseScroll",function(ev)
{
clearTimeout(timer);
timer = setTimeout(function(){
fn(ev);
},200)
});
}
content.onmousewheel = function(ev)
{
clearTimeout(timer);
timer=setTimeout(function(){
fn(ev);
},200)
};
// 处理鼠标滚轮事件的函数
function fn(ev){
// 用于表示鼠标滚轮向上还是向下滚动。
var flag ="";
// 鼠标滚动方向的判断
if(ev.detail){
flag = ev.detail>0?"down":"up";
}else if(ev.wheelDelta){
flag = ev.wheelDelta<0?"down":"up";
}
// 检查是否到达页面边界
if((now==0&&flag=="up")||(now==cLiNodes.length-1&&flag=="down")){
return;
}
// 更新当前页面索引和执行滚动
preIndex = now;
switch (flag)
{
case "up":
if(now>0){
now--;
}
move(now);
break;
case "down":
if(now<cLiNodes.length-1){
now++;
}
move(now);
break;
}
// 取消默认滚动事件
if(ev.preventDefault){
ev.preventDefault();
}
return false;
}
//头部导航
headBind();
// 头部导航及侧边导航的点击事件绑定
function headBind(){
// 为导航菜单中的每个项（nList）设置了一个index属性
for (var i=0;i<nList.length;i++) {
nList[i].index = i;
// 为导航菜单中的每个项绑定了一个点击事件处理函数。当某个导航项被点击时，触发这个函数。
nList[i].onclick = function(){
// 将当前的页面索引保存到preIndex中，然后调用move函数，根据点击的导航索引执行页面滚动操作
//最后更新now为点击的导航对应的索引。
preIndex =now;
move(this.index);
now = this.index;
}
}
// 同样的逻辑也适用于侧边导航项pList。
for (var i=0;i<pList.length;i++) {
pList[i].index = i;
pList[i].onclick = function(){
preIndex =now;
move(this.index);
now = this.index;
}
}
}
//同步主导航及侧边导航
function move(index){
// 重置导航样式并设置当前导航为active状态
for(var i=0;i<nList.length;i++){
nList[i].className = "";
}
nList[index].className = "active";
for(var i=0;i<pList.length;i++){
pList[i].className = "";
}
pList[index].className = "active";
// 调整页面内容的位置实现滚动效果
cList.style.top = -index *(document.documentElement.clientHeight - head.offsetHeight) + "px";
}
//窗口重置和内容区域高度调整
window.onresize = function (){
contentBind();
}
//内容区的高度
contentBind();
function contentBind(){
// 将内容区域（content）的高度设置为当前浏览器窗口高度减去头部导航栏高度的值
content.style.height = document.documentElement.clientHeight - head.offsetHeight + "px";
// 遍历页面内容中的每个li元素，并设置它们的高度为当前浏览器窗口高度减去头部导航栏高度的值
for(var i=0;i<cLiNodes.length;i++){
cLiNodes[i].style.height = document.documentElement.clientHeight - head.offsetHeight + "px";
}
}
}
文章来源:https://blog.csdn.net/m0_63398413/article/details/135074599
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！