热点文章

 联系我们

JS特效:到最顶部、到最底部,上下滚动

发布时间:11/07/31   转播到腾讯微博

 JS特效:到最顶部、到最底部,上下滚动

代码下载:http://www.lty0311.com/down/?f=cinv.rar

演示地址:http://www.blog.lty0311.com

图片:lty0311.com.png
JS特效:到最顶部、到最底部,上下滚动

JS文件:lty0311.com.js
/*
广而告之:网站开发、建设,首选领头羊品牌!  ——石家庄领头羊网络科技有限公司
在线QQ:290052621
网  站:www.lty0311.com
*/
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('footerbot',800);
    }else{
    scroller('headertop',800);
   }
  }
  t.onmouseover = function (){
   this.style.backgroundPosition='0 -66px';
   }
  t.onmouseout = function (){
   this.style.backgroundPosition='0 0';
  }
 }
});

使用方法:
<style type="text/css">
#fixedMenu{width:80px;height:66px;position:fixed;z-index:29;bottom:0;right:0;background:transparent url(/images/lty0311.com.png) 0 0;}
</style>
<!--[if lte IE 9]>
<style type="text/css">
#fixedMenu{_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);}
</style>
<![endif]-->
<script type="text/javascript" src="/js/lty0311.com.js"></script>

将lty0311.com.png放到图片文件夹images,将lty0311.com.js放到js文件夹(依自己网站的文件夹结构为准)

然后将这段代码放到你的网页中即可

代码下载:http://www.lty0311.com/down/?f=cinv.rar

 

上一篇:ASP随机读取记录
下一篇:推荐一款插件:基于jQuery弹出窗口插件特效AsyncBox-v1.4