返回顶部的js
JQuery js 星期三 2010-01-20

为博客换了些装备与添加上一些功能,灵感来自于昨天paperen我看的那些博客,都是基于WordPress开发的了,当然paperen我也不会错过扒人家的东西来看看这个好机会(其实同大家偷瓜偷菜不一个样),配合opera浏览器的开发者工具去挖就真是很方便了(大家如果用过就明白了) 

 

话说paperen看中了那个滑回顶部的小功能,找了它的js文件,弄过来就亲自测试起来了,现在paperen的博客都添加上这个功能了(至于赞与踩那个功能paperen我可没抄别人的东西啊) 

代码我都贴出来吧,也不是很长。 

(function(){
 function goTop(acceleration,time){
  acceleration=acceleration||0.1;//判断变量是否已定义,如果没有定义就给他一个初始值
  time=time||16;
  var dx=0;
  var dy=0;
  var bx=0;
  var by=0;
  var wx=0;
  var wy=0;
  if(document.documentElement){
   dx=document.documentElement.scrollLeft||0;
   dy=document.documentElement.scrollTop||0;
  }
  if(document.body){
   bx=document.body.scrollLeft||0;
   by=document.body.scrollTop||0;
  }
  //一个是XHTML的
  //一个是HTML的
  //为了兼容都写上
  var wx=window.scrollX||0;
  var wy=window.scrollY||0;
  var x=Math.max(wx,Math.max(bx,dx));
  var y=Math.max(wy,Math.max(by,dy));
  var speed=1+acceleration;
  window.scrollTo(Math.floor(x/speed),Math.floor(y/speed));
  if(x>0||y>0){
   var invokeFunction="MGJS.goTop("+acceleration+", "+time+")";
   window.setTimeout(invokeFunction,time);
  }
 }
 window['MGJS']={};//window.MGJS=new Object();
 window['MGJS']['goTop']=goTop;//window.MGJS.goTop=goTop;
})()

一开始paperen我也有些地方不太明白(上面自己都加了适当的注释了)确实自己的JavaScript水平不咋的,特别是对于后两行代码,还有最后那个(),到qq群问了一下,高手们的回答的确是一针见血的…… 

“为什么后面还有个()?”---因为买了东西要用,建了函数要运行,因为前面没口,所以开个口,就是马上就会执行这个函数,()是函数是马达,没马达不走,前面是一盆水 后面开口水就流。 

(function(){
     alert("ddd");   
})() //这样直接就执行了

现在来看看这个()还是没搞明白,就是说一开始就运行了goTop这个函数?显然不是啦,我用alert测试过了。不明白的还是得保留,以后或者就会有启发了。但是对于这段js的思想还是要看懂的。 

话就话是个回到顶部的js,但是仔细看看代码其实功能是回到(0,0),不单单是y轴,x轴也归零了,很全面的一个函数。然后自己参照一下它的思路也写了一个相当单纯滴,当然也要show一下,不然怎能显出我比较牛的水平呢,大家说是吧? 

function goTop_beta(){
 var speed=1.2;
 var time=16;
 var dy=0;
 var by=0;
 var wy=0;
 if(document.documentElement){ dy=document.documentElement.scrollTop||0; }
 wy=window.scrollY||0;
 var y=Math.max(wy,Math.max(by,dy));
 window.scrollTo(0,Math.floor(y/speed));
 if(y>0){
  setTimeout("goTop_beta()",time);
 }
}

描述一下功能:点击回到顶部后,如果x轴有拖动条且拖动条距离左边有数值的话,速回0处(水平方向上),而y轴的效果与上面那个一样,还有我这个只适用于xhtml,那么在调用处加上onclick="goTop_beta()"就可以了。就不用创建那个MGJS对象。 

大家可以自己拷贝代码测试一下,也是个挺不错的功能。 

还有大家可以看看这个,关于js的||与&&运算不错的一课。

http://www.javaeye.com/topic/462449

浏览 1343

0

1

评论 3

托尔斯泰 与人交谈一次,往往比多年闭门劳作更能启发心智。思想必定是在与人交往中产生,而在孤独中进行加工和表达
3 条评论 说出您的意见与看法
评论
#3 photon 说 你自己写的代码怎么运行不了,我调试时发现 dy by y那些局部变量都是0,请问怎么回事?能说下么,QQ381290779 回复
2010-08-11 16:59:16
paperen 回复 photon 多得您的提醒,原来自己最后那个地方写错了,应该是调用goTop_beta才对,setTimeout("goTop_beta()",time);循环调用自身 回复
2010-08-11 19:52:57
#2 土豆 说 牛XX,我小扒了点东西,谢谢楼主分享 回复
2010-06-08 15:36:10
paperen 回复 土豆 很高兴您能在我这得到一些东西,你博客园的博客也不错嘛,jquery的教程挺好的 http://www.cnblogs.com/zhangziqiu 回复
2010-06-10 21:11:09
#1 木哈哈 说 哈哈,第一次来你的空间,扒了很多东西哈哈 我刚学.NET不久,刚开始做网页,多多指教 回复
2010-04-28 16:08:20
paperen 回复 木哈哈 终于有人从我这扒到东西了,希望我的东西对你有用吧,你不要用指教这个词嘛,我并比你强嘛,我对.NET完全不熟呢 回复
2010-04-28 22:29:06
有啥就说两句咯
以下都是必填项
关于头像可以到 gravatar 修改或者创建

必需滴

必需滴

还是必需滴

我要说