Difference between revisions of "Template:Jilin China"

Line 361: Line 361:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<script>
 +
$(function() {
 +
 +
function DirectoryNav($h,config){
 +
        this.opts = $.extend(true,{
 +
            scrollThreshold:0.5,    //滚动检测阀值 0.5在浏览器窗口中间部位
 +
            scrollSpeed:700,        //滚动到指定位置的动画时间
 +
            scrollTopBorder:400,    //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
 +
            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();
 +
            var Thisss = this;
 +
setInterval(function(){
 +
Thisss.offArr = [];
 +
            Thisss.$h.each(function(){
 +
                var $This = $(this),
 +
                    offT = Math.round($This.offset().top);
 +
                Thisss.offArr.push(offT-200);
 +
            });
 +
        //    alert(JSON.stringify(Thisss.offArr));
 +
},1000);
 +
            this.bindEvent();
 +
        },
 +
        make:function(){
 +
            $("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.hasClass("h2_title")){
 +
                    index1++;
 +
                    if(index1%2==0) index2 = 0;
 +
                    temp.push('<li class="l1"><span class="c-dot"></span><a class="l1-text">'+text+'</a></li>');
 +
                }else{
 +
                    index2++;
 +
                    temp.push('<li class="l2"><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();
 +
            }
 +
        },
 +
        posTag:function(top){
 +
            this.$curTag.css({top:top+'px'});
 +
        },
 +
        ifPos:function(st){
 +
            var offArr = this.offArr;
 +
            var windowHeight = Math.round(this.$win.height());
 +
            for(var i=0;i<offArr.length;i++){
 +
                if((offArr[i] - windowHeight + 650) < st) {
 +
                    var $curLi = this.$pageNavListLis.eq(i),
 +
                        tagTop = $curLi.position().top;
 +
                    $curLi.addClass("cur").siblings("li").removeClass("cur");
 +
                    if($curLi.hasClass("l2")){
 +
                    this.$curTag.addClass("cur2");
 +
                    }else{
 +
                    this.$curTag.removeClass("cur2");
 +
                    }
 +
                    this.curIndex = i;
 +
                    this.posTag(tagTop-6);
 +
                    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();
 +
                if(callback){
 +
                if(this.tagName.toLowerCase()=='body'){
 +
                callback();
 +
                }
 +
                }
 +
            });
 +
        }
 +
    };
 +
 +
var directoryNav = new DirectoryNav($(".h1_title,.h2_title"),{
 +
        scrollTopBorder:400  //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
 +
    });
 +
});
 +
   
 +
 +
</script>

Revision as of 05:43, 25 October 2017