前端 | 一个导航栏点击滑动切换框架

发布时间：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
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章