Difference between revisions of "Team:NAU-CHINA/Model"

Line 3: Line 3:
 
{{NAU-CHINA/header}}
 
{{NAU-CHINA/header}}
  
−
 
+
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，则一直显示
 +
});
 
<html>
 
<html>
 
<head lang="en">
 
<head lang="en">

Revision as of 20:54, 11 October 2018

Template:2018_NAU-CHINA

header

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('
    >'); 
      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('
  • '+index1+'. <a class="l1-text">'+text+'</a>
    • '); 
       }else{
    index2++;
    temp.push('
  • '+index1+'.'+index2+' <a class="l2-text">'+text+'</a>
    • '); 
       }
  });
  $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，则一直显示
});

    仿百度百科右侧导航代码jquery插件/

    向下滚动，观察右下角 仿百度百科右侧导航代码jquery插件

    标题一

    标题一-1

    标题一-2

    标题一-3

    标题二

    标题一-1

    标题一-2

    标题一-3

    标题三

    标题四

    标题五

    标题六