單頁面官網-平滑過渡到指的錨點

zhaot 發布于2019-08-01 17:28 / 2715人閱讀

摘要：特點單頁面官網不是傳說中的單頁面應用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內容區底部樣式導航欄的樣式要注意，這給當前樣式多帶帶做了一個層，絕對定位，鼠標移動

特點

單頁面官網--不是傳說中的單頁面應用！
固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換
如：考拉微課

HTML布局



    
        Features
        Product Center
        Showcase
        Service & Support
        Contact Us
        
    



    111111
    22222
    333333
    44444
    55555


footer

CSS樣式

導航欄的樣式要注意，這給當前樣式多帶帶做了一個DIV層，絕對定位，鼠標移動到哪個導航，這個當前樣式層就移動到這個導航菜單上。

JS方法封裝

JS部分封裝一個插件navScroll.js

/*  導航滾動插件 參數：
*       navBox: 導航欄
*       navA: 導航列表，內部嵌套帶有錨點的a標簽
*       navFocus: 導航列表當前狀態
*       className：導航列表 當前狀態下的className
* */
function navScroll(navBox,navA,navFocus,className) {
    /* 設置 當前樣式 寬度 和 位置 ，初始為第一個導航的位置*/
    var index = 0; // 設置當前索引 初始為0
    var $sW = navA.eq(index).outerWidth();
    var $sL = navA.eq(index).position().left;
    navFocus.css({  width: $sW, left:  $sL });
    curClass(navA.eq(index));
    /* 鼠標移入到導航欄 改變當前樣式*/
    navA.mouseenter(function () {
        curClass($(this));
        navFocusMove($(this));
    });
    // 鼠標離開導航欄時 當前樣式回到 上次位置
    navBox.mouseleave(function () {
        navFocus.stop().animate( {
            width: $sW,
            left:  $sL
        },function () {
            /*給上一次導航添加當前樣式*/
            curClass(navA.eq(index))
        })
    });
    /*滾動到某個部分 對應導航改變樣式*/
    $(document).on("scroll",function(){
        var    docTop = $(document).scrollTop()+100,
            offsetTop=[];
        for(var i = 0,length = navA.length;i=offsetTop[i]){
                curNav(navA.eq(i));
                curClass(navA.eq(i));
                navFocusMove(navA.eq(i))
            }
        }
    });
    /* 點擊導航時 改變導航樣式，文檔平滑的滾動到指定的位置*/
    navA.click(function() {
        curNav($(this));
        curClass($(this));
        navFocusMove($(this));
        $("html, body").animate({
            /*根據a標簽href轉換為ID選擇器 獲取對應位置*/
            scrollTop: $($(this).attr("href")).offset().top - 100+"px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
// 當前樣式 移動函數
    function navFocusMove(that) {
        navFocus.stop().animate( {
            width: that.outerWidth(),
            left:  that.position().left
        })
    }
// 添加當前樣式，刪除其他當前樣式
    function curClass(curnavA) {
        curnavA.addClass(className).parent().siblings().find("a").removeClass(className);
    }
    /*記錄上一次當前樣式所在位置 */
    function curNav(obj) {
        $sW = obj.outerWidth();
        $sL = obj.position().left;
        index = obj.parent().index();
    }
    // 改變窗口大小時 設置 導航的當前樣式
    $(window).resize(function () {
        var $sW = navA.eq(index).outerWidth();
        var $sL = navA.eq(index).position().left;
        navFocus.css({  width: $sW, left:  $sL });
        }
    )

}

JS方法調用

在頁面中調用引用JQ庫以及這個 navScroll.js插件

剛學完js的小白，思路都在注釋中，看不懂的請留言，不喜勿噴，歡迎指正！
完整案例

GPU云服務器云服務器 html的錨點 html a的錨點平滑過渡 html錨點跳轉頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51164.html

單頁面官網-平滑過渡到指的錨點

摘要：特點單頁面官網不是傳說中的單頁面應用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內容區底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網--不是傳說中的單頁面應用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

SegmentFault 2019-08-20 18:56 評論0 收藏0
單頁面官網-平滑過渡到指的錨點

摘要：特點單頁面官網不是傳說中的單頁面應用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內容區底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網--不是傳說中的單頁面應用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

tianhang 2019-08-29 13:13 評論0 收藏0
學習 PixiJS — 補間動畫

摘要：方法的參數如下名稱默認值描述需要移動的精靈貝塞爾曲線的坐標點的數組補間需要的幀數，也就是動畫應該持續多長時間緩動類型用于確定精靈是否應在補間的起點和終點之間來回移動。說明補間動畫指的是，我們可以通過為精靈的位置、比例、透明度，等屬性，設置開始值和結束值，制作動畫，動畫中間需要的部分由軟件自動計算填充。 Pixi 沒有內置補間引擎，但是你可以使用很多很好的開源的補間庫，比如 Twee...

levius 2019-08-23 15:17 評論0 收藏0
頁面快速定位到指定位置的幾個方法

摘要：但是就頁面定位到指定位置其實還有更好的辦法，就是使用去獲取指定位置的，這樣的話還可以加滑動動畫，使定位的這個過程比較平滑。需求頁面上有一排按鈕，懸浮在窗口頂端，不隨頁面滑動而滑動，這一組按鈕分別對應的是頁面的各個部分，點擊按鈕，頁面定位到對應的位置。需求分析拿到這個需求，很自然的想到，解決這個最簡單的方法是使用錨點（能靠HTML和css解決的，盡量不使用js 解法想到使用錨點...

AlanKeene 2019-08-22 18:10 評論0 收藏0