国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

前端 | 一個導(dǎo)航欄點擊滑動切換框架

2年前作者：啦啦右一分類：Toy博客閱讀(20)違法舉報

這篇具有很好參考價值的文章主要介紹了前端 | 一個導(dǎo)航欄點擊滑動切換框架。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

??目標效果

前端 | 一個導(dǎo)航欄點擊滑動切換框架,# 小案例,web開發(fā)——前端,前端

  • 鼠標滾輪上下滑動切換。
  • 導(dǎo)航欄點擊切換。
  • 側(cè)邊欄小圓點點擊切換。

??HTML

  • 基本框架就是head頭部導(dǎo)航欄+content內(nèi)容區(qū)域。

  • 其中content里頭套列表，每個列表對應(yīng)一個切換頁面。

  • 加/減角度就在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>
			<!-- 側(cè)邊原點 -->
			<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

  • 重置樣式：對頁面中各個元素的默認樣式進行重置，包括設(shè)置頁面的高度為100%、禁止頁面的滾動條、去除各元素的內(nèi)外邊距、設(shè)置默認的字體等。
    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;}
  • 頭部樣式：定義了頁面的頭部樣式，包括了頭部的寬度、高度、背景顏色等，以及l(fā)ogo和導(dǎo)航的布局樣式。
    #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;}
  • 右側(cè)點擊欄：定義了頁面右側(cè)的點擊欄樣式，包括了位置、寬度、高度、邊框樣式和過渡效果等。
    #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;}
  • 頁面內(nèi)容部分
    /* 頁面內(nèi)容部分樣式定義 */
#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

頁面的滾動和導(dǎo)航功能，包括滾輪事件和頭部導(dǎo)航的點擊事件等。文章來源地址http://www.zghlxwxcb.cn/news/detail-766916.html

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;
    
    //監(jiān)聽鼠標滾輪事件
    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)
    };

    // 處理鼠標滾輪事件的函數(shù)
    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;
        }
        // 更新當前頁面索引和執(zhí)行滾動
        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;
    }
    
    //頭部導(dǎo)航
    headBind();
    // 頭部導(dǎo)航及側(cè)邊導(dǎo)航的點擊事件綁定
    function headBind(){
        // 為導(dǎo)航菜單中的每個項（nList）設(shè)置了一個index屬性
        for (var i=0;i<nList.length;i++) {
            nList[i].index = i;
            // 為導(dǎo)航菜單中的每個項綁定了一個點擊事件處理函數(shù)。當某個導(dǎo)航項被點擊時，觸發(fā)這個函數(shù)。
            nList[i].onclick = function(){
                // 將當前的頁面索引保存到preIndex中，然后調(diào)用move函數(shù)，根據(jù)點擊的導(dǎo)航索引執(zhí)行頁面滾動操作
                //最后更新now為點擊的導(dǎo)航對應(yīng)的索引。
                preIndex =now;
                move(this.index);
                now = this.index;
            }
        }
        // 同樣的邏輯也適用于側(cè)邊導(dǎo)航項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;
            }
        }
    }
    
    //同步主導(dǎo)航及側(cè)邊導(dǎo)航
    function move(index){
        // 重置導(dǎo)航樣式并設(shè)置當前導(dǎo)航為active狀態(tài)
        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";
        // 調(diào)整頁面內(nèi)容的位置實現(xiàn)滾動效果
        cList.style.top = -index *(document.documentElement.clientHeight - head.offsetHeight) + "px";
    }
    
    //窗口重置和內(nèi)容區(qū)域高度調(diào)整
    window.onresize = function (){
        contentBind();
    }
    //內(nèi)容區(qū)的高度 
    contentBind();
    function contentBind(){
        // 將內(nèi)容區(qū)域（content）的高度設(shè)置為當前瀏覽器窗口高度減去頭部導(dǎo)航欄高度的值
        content.style.height = document.documentElement.clientHeight - head.offsetHeight + "px";
        // 遍歷頁面內(nèi)容中的每個li元素，并設(shè)置它們的高度為當前瀏覽器窗口高度減去頭部導(dǎo)航欄高度的值
        for(var i=0;i<cLiNodes.length;i++){
            cLiNodes[i].style.height = document.documentElement.clientHeight - head.offsetHeight + "px";
        }
    }
}

到了這里，關(guān)于前端 | 一個導(dǎo)航欄點擊滑動切換框架的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包