WEB开发网
开发学院网页设计JavaScript 用 Javascript 实现锚点(Anchor)间平滑跳转 阅读

用 Javascript 实现锚点(Anchor)间平滑跳转

 2010-09-14 13:13:29 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>用 Javascript 实现锚点(Anchor)间平滑跳转<

本文示例源代码或素材下载

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>用 Javascript 实现锚点(Anchor)间平滑跳转</title>
  <script language="javascript">
  // 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转
  
  // 转换为数字
  function intval(v)
  {  
  v = parseInt(v);  
  return isNaN(v) ? 0 : v;
  } 
  // 获取元素信息
  function getPos(e)
  {  
  var l = 0;  
  var t = 0;  
  var w = intval(e.style.width);  
  var h = intval(e.style.height);  
  var wb = e.offsetWidth;  
  var hb = e.offsetHeight;  
  while (e.offsetParent)
  {    
   l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);    
   t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);    
   e = e.offsetParent;  
   }  
   l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);  
   t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);  
   return {x:l, y:t, w:w, h:h, wb:wb, hb:hb}; } 
   // 获取滚动条信息
   function getScroll() 
   {  
   var t, l, w, h;     
   if (document.documentElement && document.documentElement.scrollTop)
   {    
   t = document.documentElement.scrollTop;    
   l = document.documentElement.scrollLeft;    
   w = document.documentElement.scrollWidth;    
   h = document.documentElement.scrollHeight;  
   }
   else if (document.body)
   {    
   t = document.body.scrollTop;    
   l = document.body.scrollLeft;    
   w = document.body.scrollWidth;    
   h = document.body.scrollHeight;  
   }  
   return { t: t, l: l, w: w, h: h };
   } 
   // 锚点(Anchor)间平滑跳转
   function scroller(el, duration)
   {  
   if(typeof el != 'object')
   {
   el = document.getElementById(el);
   }   
   if(!el) return;   
   var z = this;  
   z.el = el;  
   z.p = getPos(el);  
   z.s = getScroll();  
   z.clear = function()
   {
   window.clearInterval(z.timer);z.timer=null
   };  
   z.t=(new Date).getTime();   
   z.step = function()
   {    
   var t = (new Date).getTime();    
   var p = (t - z.t) / duration;    
   if (t >= duration + z.t)
   {      
   z.clear();      
   window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);     }
   else {      
   st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;      
   sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;      
   z.scroll(st, sl);    
   }  
   };  
   z.scroll = function (t, l){window.scrollTo(l, t)};  
   z.timer = window.setInterval(function(){z.step();},13);
   }
  </script>
  <style type="text/css">
  div.test
  {  
  width:400px;   margin:5px auto;   border:1px solid #ccc;
  }
  div.test strong
  {   font-size:16px;   background:#fff;   border-bottom:1px solid #aaa;   margin:0;   display:block;   padding:5px 0;   text-decoration:underline;   color:#059B9A;   cursor:pointer; } div.test p {   height:400px;   background:#f1f1f1;   margin:0;
  }
   </style>
</head>
<body>
  <form id="form1" runat="server">
  <div class="test">  
  <a name="header_1" id="header_1"></a>  
  <strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong><p></p>
  </div> 
  <div class="test">  
  <a name="header_2" id="header_2"></a>  
  <strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong><p></p>
  </div> 
  <div class="test">  
  <a name="header_3" id="header_3"></a>  
  <strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong><p></p>
  </div> 
  <div class="test">  
  <a name="header_4" id="header_4"></a>  
  <strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong><p></p>
  </div> 
  <div class="test">  
  <a name="header_5" id="header_5"></a>  
  <strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong><p></p>
  </div> 
  <div class="test">  
  <a name="header_6" id="header_6"></a>  
  <strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong><p></p>
  </div> 
  <div class="test">  
  <a name="header_7" id="header_7"></a>  
  <strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong><p></p>
  </div>
  </form>
</body>
</html>

Tags:Javascript 实现 Anchor

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接