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

2023-12-20 22:25:55

📚目标效果

在这里插入图片描述

  • 鼠标滚轮上下滑动切换。
  • 导航栏点击切换。
  • 侧边栏小圆点点击切换。

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