用 Javascript实现锚点平滑移动.呵呵.刚刚发现一篇js文章,写的不错,偷过来收藏一下...
2007-06-28 12:04
441 查看
js 代码
scroller(el, duration)
el : 目标锚点 ID
duration : 持续时间,以毫秒为单位,越小越快
阅读更多
- <script type="text/javascript"> // 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 // 来源 :ThickBox 2.1 // 整理 :Yanfu Xie [xieyanfu@yahoo.com.cn] // 网址 :http://www.codebit.cn // 日期 :07.01.17 // 转换为数字 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>
- <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>
调用方式:
Code:
scroller(el, duration)
el : 目标锚点 ID
duration : 持续时间,以毫秒为单位,越小越快
阅读更多
相关文章推荐
- 发现两篇不错的文章在这里把地址收藏一下
- 利用javascript 实现锚点间平滑移动
- 挺有意思的一篇转过来的文章 收藏一下:P
- 刚刚看到的一篇写软件开发方法的文章,收藏一下--采用XP方法使软件项目获得更大成功
- 老徐的一篇文章,符合我现在的心情,收藏一下
- 『收藏』可拖放移动的层的Javascript实现
- 帮助你实现移动设备上的拖拽刷新功能的javascript类库 - hook.js
- 帮助你实现移动设备上的拖拽刷新功能的javascript类库 - hook.js
- 关于JS闭包一篇不错的文章记录下
- 帮助你实现移动设备上的拖拽刷新功能的javascript类库 - hook.js
- JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
- 在网上发现了一篇关于接口的文章拿来分享一下
- 关于Servlet的多线程,看到一篇不错的文章,关注一下
- C的Block,觉得不错的一篇文章转过来
- 讲解SQL Injection一篇不错的文章,地址贴一下
- 发现一篇不错的文章,包括ANR,Activity超负荷...等
- 关于介绍JS OOP的一篇文章 收藏了
- 一篇不错的javascript正则表达式的文章
- 发现一篇不错的学习隐马尔可夫模型的文章
- js平滑移动到锚点