仿twitter网站的返回网页顶部和返回底部功能

发布时间：2018-09-30 11:06:30 所属栏目：Unix 来源：站长网

导读：仿twitter网站的返回网页顶部和返回底部功能，代码中使用了一个PNG的小鸟图片，有一种非常新鲜的感觉，当我们点击小鸟时，会返回顶部，再点击又会回到网页尾部，非常不错的切换效果。演示代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional

　　仿twitter网站的返回网页顶部和返回底部功能，代码中使用了一个PNG的小鸟图片，有一种非常新鲜的感觉，当我们点击小鸟时，会返回顶部，再点击又会回到网页尾部，非常不错的切换效果。

　　演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>页面顶部和底部切换效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{background:#1a3265 url(about:blank) no-repeat fixed;padding:0px;margin:0px;cursor:default;} #fixedMenu{width:80px;height:66px;position:fixed;z-index:29;bottom:0;right:0;background:transparent url(/uploads/allimg/1101/twitter.png) 0 0;} </style>  <script type="text/javascript"> function $(t){return _.getElementById(t);} /* 平滑跳转到锚点处理块 */ 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 }; } 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); } var _ = document; //绑定页面加载完成事件调用函数 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { //静止按钮 if(t=$('fixedMenu')){ t.style.cursor = 'pointer'; t.title = '烈火学院提示：本鸟只可远观不可亵玩焉...'; x=2; t.onclick = function (){ if (document.documentElement && document.documentElement.scrollTop) { st = document.documentElement.scrollTop; } else if (document.body) { st = document.body.scrollTop; } if(st<x){ scroller('footer',800); }else{ scroller('header',800); } } t.onmouseover = function (){ this.style.backgroundPosition='0 -66px'; } t.onmouseout = function (){ this.style.backgroundPosition='0 0'; } } }); </script> </head> <body> <div id="header" style="color:#ffffff;">这里是页面顶部</div> <div id="content" style="height:2000px;"></div> <div id="footer" style="color:#ffffff;">这里是页面底部</div> <div id="fixedMenu"></div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：南京站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!