目前流行的DIV+JS內容滾動導航特效_文本鏈接特效

目前流行的DIV+JS內容滾動導航特效，點擊某一個導航的時候，頁面會滾動至對應的內容，給你的網頁增加點動感元素，擴展性好，你可以無限制增加導航項目。簡單美化了一下，要用的朋友自己美化一下吧。

<html>
<head>
<title>滾動導航</title>
<style type="text/css">
#container{
text-align: left;
  background-color: #faf7ec;
  width: 499px;
  margin: 20px auto 0 auto;
  padding: 0;
  font-family:Arial, Helvetica, sans-serif;
}
#block0, #block1, #block2, #block3, #block4, #block5 {
  border-top: solid 1px #785a3c;
  margin: 0;
  padding: 10px;
}
#block0, #block0.active, #block0.visited {
  text-align: center;
  background-color: #a0dcf8;
  border-top: none;
  border-bottom: solid 4px #785a3c;
}
</style>
<script>
var ScrollWin = {
  w3c : document.getElementById,
  iex : document.all,
  scrollLoop : false,
  scrollInterval : null,
  currentBlock : null,
  getWindowHeight : function(){
    if(this.iex) return (document.documentElement.clientHeight) ? 
document.documentElement.clientHeight : document.body.clientHeight;
    else return window.innerHeight;
  },

getScrollLeft : function(){
    if(this.iex) return (document.documentElement.scrollLeft) ? 
document.documentElement.scrollLeft : document.body.scrollLeft;
    else return window.pageXOffset;
  },

getScrollTop : function(){
    if(this.iex) return (document.documentElement.scrollTop) ? 
document.documentElement.scrollTop : document.body.scrollTop;
    else return window.pageYOffset;
  },
  getElementYpos : function(el){
    var y = 0;
    while(el.offsetParent){
      y += el.offsetTop
      el = el.offsetParent;
    }
    return y;
  },
  scroll : function(num){
    if(!this.w3c){
      location.href = "#"+this.anchorName+num;
      return;
    }
    if(this.scrollLoop){
      clearInterval(this.scrollInterval);
      this.scrollLoop = false;
      this.scrollInterval = null;
    }

if(this.currentBlock != null) this.currentBlock.className = this.offClassName;
    this.currentBlock = document.getElementById(this.blockName+num);
    this.currentBlock.className = this.onClassName;
    var doc = document.getElementById(this.containerName);
    var documentHeight = this.getElementYpos(doc) + doc.offsetHeight;
    var windowHeight = this.getWindowHeight();
    var ypos = this.getElementYpos(this.currentBlock);
    if(ypos > documentHeight - windowHeight) ypos = documentHeight - windowHeight;
    this.scrollTo(0,ypos);
  },
// www.zhaotila.cn
  scrollTo : function(x,y){
    if(this.scrollLoop){
      var left = this.getScrollLeft();
      var top = this.getScrollTop();
      if(Math.abs(left-x) <= 1 && Math.abs(top-y) <= 1){
        window.scrollTo(x,y);
        clearInterval(this.scrollInterval);
        this.scrollLoop = false;
        this.scrollInterval = null;
      }else{
        window.scrollTo(left+(x-left)/10, top+(y-top)/10);   
      }

}else{
      this.scrollInterval = setInterval("ScrollWin.scrollTo("+x+","+y+")",20);    
      this.scrollLoop = true;
    }
  }
};
ScrollWin.containerName = "container"; 
ScrollWin.anchorName    = "anchor";   
ScrollWin.blockName     = "block";     
ScrollWin.onClassName   = "active";    
ScrollWin.offClassName  = "visited";   
</script>
</head>
<body>

所屬頻道：文本鏈接特效/更新時間：2012-12-04

[收藏][報錯][返回列表]

相關文本鏈接特效：

目前流行的DIV+JS內容滾動導航特效_文本鏈接特效

文本鏈接特效Rss訂閱特效代碼搜索

文本鏈接特效推薦

猜你也喜歡看這些