知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    仿百度百科右側導航代碼jquery插件

    作者:佳明媽 來源:jquery插件 2015-11-09 人氣:
    仿百度百科右側導航代碼jquery插件,這個仿百科右側導航js代碼,在很久以前就像搞個用了,這個右側導航特別適合長篇文檔使用,花了半天時間寫了這個仿百科導航插件,不過和百度百
    仿百度百科右側導航代碼jquery插件,這個仿百科右側導航js代碼,在很久以前就像搞個用了,因為這個導航特別適合長篇文檔使用,花了半天時間寫了這個仿百科導航插件,不過和百度百科比起來還是有點弱,沒有實現右側導航區域滾動的功能,如果您的文檔不是超級變態長,應該夠用。
    如果你的導航超級長,可能要用到側邊導航頁可以滾動,一般情況下還是用不到,等過些時候有好的實現思路再搞吧,暫時沒想到實現右側導航區域和左側內容的滾動并且聯動的好辦法。

    下面是js代碼,您可以查看演示或者下載。

    注意:var directoryNav = new DirectoryNav($("h2,h3"),{}); 中的"h2,h3"就是生成兩級導航的內容節點

    /*
        * 懶人建站 http://www.ezdqdj.live/
        *仿百度百科右側導航代碼 -  頁面目錄結構導航 v0.01
        * 只寫了兩級,無限級別也可以,是邏輯上的級別,html結構全是同一級別
        * 滑標動畫用的css3過渡動畫,不支持的瀏覽器就沒動畫效果了
        * 和百度百科比起來還是比較弱,沒有實現右邊也可以滾動的功能
        */
        function DirectoryNav($h,config){
            this.opts = $.extend(true,{
                scrollThreshold:0.5,    //滾動檢測閥值 0.5在瀏覽器窗口中間部位
                scrollSpeed:700,        //滾動到指定位置的動畫時間
                scrollTopBorder:500,    //滾動條距離頂部多少的時候顯示導航
                easing: 'swing',        //不解釋
                delayDetection:200,     //延時檢測,避免滾動的時候檢測過于頻繁
                scrollChange:function(){}
            },config);
            this.$win = $(window);
            this.$h = $h;
            this.$pageNavList = "";
            this.$pageNavListLis ="";
            this.$curTag = "";
            this.$pageNavListLiH = "";
            this.offArr = [];
            this.curIndex = 0;
            this.scrollIng = false;
            this.init();
        }
     
        DirectoryNav.prototype = {
            init:function(){
                this.make();
                this.setArr();
                this.bindEvent();
            },
            make:function(){
                //生成導航目錄結構,這是根據需求自己生成的。如果你直接在頁面中輸出一個結構那也挺好不用 搞js
                $("body").append('<div class="directory-nav" id="directoryNav"><ul></ul><span class="cur-tag"></span><span class="c-top"></span><span class="c-bottom"></span><span class="line"></span></div>>');
                var $hs = this.$h,
                    $directoryNav = $("#directoryNav"),
                    temp = [],
                    index1 = 0,
                    index2 = 0;
                $hs.each(function(index){
                    var $this = $(this),
                            text = $this.text();
                    if(this.tagName.toLowerCase()=='h2'){
                        index1++;
                        if(index1%2==0) index2 = 0;
                        temp.push('<li class="l1"><span class="c-dot"></span>'+index1+'. <a class="l1-text">'+text+'</a></li>');
                    }else{
                        index2++;
                        temp.push('<li class="l2">'+index1+'.'+index2+' <a class="l2-text">'+text+'</a></li>');
     
                    }
                });
                $directoryNav.find("ul").html(temp.join(""));
     
                //設置變量
                this.$pageNavList = $directoryNav;
                this.$pageNavListLis = this.$pageNavList.find("li");
                this.$curTag = this.$pageNavList.find(".cur-tag");
                this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();

                if(!this.opts.scrollTopBorder){
                    this.$pageNavList.show();
                }
            },
            setArr:function(){
                var This = this;
                this.$h.each(function(){
                    var $this = $(this),
                        offT = Math.round($this.offset().top);
                    This.offArr.push(offT);
                });
            },
            posTag:function(top){
                this.$curTag.css({top:top+'px'});
            },
            ifPos:function(st){
                var offArr = this.offArr;
                //console.log(st);
                var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold);
                for(var i=0;i<offArr.length;i++){
                    if((offArr[i] - windowHeight) < st) {
                        var $curLi = this.$pageNavListLis.eq(i),
                            tagTop = $curLi.position().top;
                        $curLi.addClass("cur").siblings("li").removeClass("cur");
                        this.curIndex = i;
                        this.posTag(tagTop+this.$pageNavListLiH*0.5);
                        //this.curIndex = this.$pageNavListLis.filter(".cur").index();
                        this.opts.scrollChange.call(this);
                    }
                }
            },
            bindEvent:function(){
                var This = this,
                    show = false,
                    timer = 0;
                this.$win.on("scroll",function(){
                    var $this = $(this);
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        This.scrollIng = true;
                        if($this.scrollTop()>This.opts.scrollTopBorder){
                            if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height();
                            if(!show){
                                This.$pageNavList.fadeIn();
                                show = true;
                            }
                            This.ifPos( $(this).scrollTop() );
                        }else{
                            if(show){
                                This.$pageNavList.fadeOut();
                                show = false;
                            }
                        }
                    },This.opts.delayDetection);
                });
     
                this.$pageNavList.on("click","li",function(){
                    var $this = $(this),
                        index = $this.index();
                    This.scrollTo(This.offArr[index]);
                })
            },
            scrollTo: function(offset,callback) {
                var This = this;
                $('html,body').animate({
                    scrollTop: offset
                }, this.opts.scrollSpeed, this.opts.easing, function(){
                    This.scrollIng = false;
                    //修正彈兩次回調 蛋疼
                    callback && this.tagName.toLowerCase()=='body' && callback();
                });
            }
        };
     
     //調用實例化
        var directoryNav = new DirectoryNav($("h2,h3"),{
            scrollTopBorder:0   //滾動條距離頂部多少的時候顯示導航,如果為0,則一直顯示
        });

    在寫百度百科右側導航js代碼的時候有個想法,就是讓右側導航區域的滾動條和左側內容的滾動條用一個計算公式讓他們關聯起來,實現同步滾動。

    有大神知道怎么實現兩個高度不一樣的滾動區域同步滾動的辦法,還請賜教。
    ↓ 查看全文

    仿百度百科右側導航代碼jquery插件由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    仿百度百科右側導航代碼jquery插件-最新評論

    老子是皇帝在线客服 山西快乐10分玩法 余额宝往支付宝赚钱限额多少钱 在家不用动的手机赚钱方法 梦幻西游玩什么赚钱 彩票开奖广东南粤36选7开奖结果 qq国际麻将规则 山东11选五最新开奖 516棋牌游戏中心 福彩p62中奖号码 河南快赢481近200期走势图 开钢琴 电子琴培训班 赚钱吗 如何看pk10走势图 论文检测赚钱吗 七星彩走势图带线 4米2平板车赚钱 极速快乐十分app