[jQuery] 滑动导航代码小更新

花了一下午把Simple-I主题再一次全面的整理了一遍，对所有JS进行了优化，主要是在对象选择的优化上。

其中一段就是这个滑动导航代码的小更新，原来的代码是：

 
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>

 
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
 
$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
 
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

现更新如下：

 
<div id="shangxia"><div id="shang" href="#header"></div><div id="comt" href="#comments"></div><div id="xia" href="#footer"></div></div>

HTML代码部分添加了href属性，然后看jQuery代码：

 
//By ImMmMm.com
 
$('#shang,#xia,#comt').live('click',function(){
 
	var href=$(this).attr('href'),tops=$(href).offset().top; //获取点击对象的href属性，并获取此属性对象相对浏览器滚动条的距离
 
	$('html,body').animate({scrollTop:tops},400); //开滑咯～
 
});

OK，再回头看看原来实现代码和现在的。个人认为，新代码更具灵活性。关于性能上，这个我就说不准了……

也请各位童鞋各位看官自行选择咯～

PS：另外给ajax无限翻页加了个判断，到最后一页时，显示“最末页”。童鞋们可以在首页点击一个冷门的标签，再点击翻页试试～

winy
一月 23, 2011 18:16:18 #1

杀

回复
winy
一月 23, 2011 18:17:18 #2

呀，代码研究越来越有水平了，收下了

回复
- 林木木
  一月 23, 2011 18:27:18
  
  突然想到的，jQuery代码一见重复的就像给精简了～
  
  回复
Suyos
一月 23, 2011 18:21:18 #3

又优化了

回复
- 林木木
  一月 23, 2011 18:32:18
  
  jQuery的口号是Write Less, Do More！～
  
  回复
小闇
一月 23, 2011 18:22:18 #4

正要用著呢，木木給力呀！

回复
- 林木木
  一月 23, 2011 18:33:18
  
  嘻嘻，有几个优化方法还私藏着，HOHO～
  
  回复
zwwooooo
一月 23, 2011 18:25:18 #5

又精简了，太厉害鸟！话说用FF流量你的博客很不装啊，一卡一卡的。。。IE不鸟也罢，你连FF也不鸟了，强！

回复
- 林木木
  一月 23, 2011 18:35:18
  
  是由于大的box-shadow引起的，哎，我在看看用图片的吧，上次弄了一晚chrome下OK，ff下不行……
  
  回复
冰剑
一月 23, 2011 18:34:18 #6

第一次很前很前。。

回复
- MOPVHS
  一月 23, 2011 20:21:20
  
  第一次看见你很前面…
  
  回复
  - 冰剑
    一月 23, 2011 22:04:22
    
    是啊，用RSS神马订阅都是浮云，微博F才是王道。
    
    回复
- 林木木
  一月 23, 2011 20:45:20
  
  冰哥放假米有？
  
  回复
  - 冰剑
    一月 23, 2011 22:03:22
    
    成为无业游民已经一个多月了。
    
    回复
Ansonyi
一月 23, 2011 18:45:18 #7

怎么都是火狐浏览器……Windows7果然普及了

回复
- 林木木
  一月 23, 2011 20:47:20
  
  你也不看来这的都是谁？折腾狂人～
  
  回复
xiaoxin
一月 23, 2011 18:47:18 #8

杯具，手机没留上，还是得用电脑！

回复
- 林木木
  一月 23, 2011 20:49:20
  
  HOHO，你那主题也很漂亮～不错不错
  
  回复
  - xiaoxin
    一月 23, 2011 22:31:22
    
    你的功劳，框架是SD的，自己没细胞！
    
    回复
afterstory
一月 23, 2011 18:59:18 #9

又有这么多人前排了额……囧

回复
闲云野鹤
一月 23, 2011 20:17:20 #10

木木老师又上一层楼了，现在修炼到第几层了，哈哈

回复
- 林木木
  一月 23, 2011 20:53:20
  
  永无止境～
  
  回复
MOPVHS
一月 23, 2011 20:20:20 #11

嗯嗯，这代码一定要拿走….

回复
- 林木木
  一月 23, 2011 20:56:20
  
  有时会出现点击，顿一顿才滑上去……
  
  回复
小松
一月 23, 2011 20:38:20 #12

精简了代码~

回复
- 林木木
  一月 23, 2011 20:56:20
  
  恩哈～更灵活些了～
  
  回复
囧啊囧
一月 23, 2011 20:54:20 #13

我动作太慢，没沙发了

回复
- 林木木
  一月 23, 2011 21:20:21
  
  没FO我微薄？
  
  回复
  - 囧啊囧
    一月 23, 2011 21:22:21
    
    我现在去跟你twitter
    
    回复
老王
一月 23, 2011 21:22:21 #14

话说我这俗人升级后除了最显眼的“最未页”外，还真没发现具体的变化。

回复
- 林木木
  一月 23, 2011 21:23:21
  
  看更新说明撒～
  
  回复
老大网络
一月 23, 2011 21:54:21 #15

一会再试试
这个效果我一直就没加成功！

回复
Solo
一月 23, 2011 21:56:21 #16

呃，小小修改，简洁了不少…

回复
blueandhack
一月 23, 2011 22:19:22 #17

又优化了，我去更新文章~

回复
峄峰
一月 23, 2011 22:56:22 #18

研究一下，跟进修改

回复
wmtimes
一月 24, 2011 00:06:0 #19

不错。在不断更新是好事。

回复
Nathan
一月 24, 2011 09:14:9 #20

反馈：我点了“考编”的tag，明明只有一篇文章。结果ajax加载的时候还是无限循环了。

回复
- 老王
  一月 24, 2011 11:20:11
  
  这个问题确实存在哟,别的没有.很奇怪的说
  
  回复
  - 林木木
    一月 24, 2011 11:53:11
    
    缓存的因素吧～
    
    回复
- 林木木
  一月 24, 2011 11:52:11
  
  页数一直增加？可能是缓存的问题～
  
  回复
园子
一月 24, 2011 09:43:9 #21

嘿嘿
又开始折腾了。

回复
zuiTT
一月 24, 2011 14:48:14 #22

先马克了，以后肯定用得上

回复
Veezy
一月 24, 2011 15:30:15 #23

跟着改~

回复
奚少
一月 24, 2011 15:39:15 #24

果断跟着更改~~

回复
奚少
一月 24, 2011 15:48:15 #25

哎，又没搞定，还是不滑…还用原代码吧…

回复
善良的小狗
一月 24, 2011 21:52:21 #26

今天用UCmobile 测试了下居然也支持JQ的这个右移的效果

回复
- 林木木
  一月 25, 2011 19:15:19
  
  看基于什么内核地～
  
  回复
  - 善良的小狗
    一月 25, 2011 19:16:19
    
    uc的我不知道了
    
    回复
一世年华
一月 24, 2011 22:54:22 #27

这种技术性的文章都需要标记下，以后自己要用的时候再回来看。。。。

回复
- 林木木
  一月 25, 2011 19:19:19
  
  GR里加星呗，以防啥不测～
  
  回复
  - 一世年华
    一月 25, 2011 19:48:19
    
    啥叫 GR？？
    
    回复
    - 林木木
      一月 25, 2011 20:06:20
      
      GoogleReader……订阅器
      
      回复
Maplews
一月 25, 2011 12:03:12 #28

不错耶。

回复
希图
一月 25, 2011 15:08:15 #29

来看看。。。。

回复
- 林木木
  一月 25, 2011 19:33:19
  
  欢迎欢迎～～
  
  回复
落伍啦
一月 25, 2011 22:40:22 #30

不错不错，又学习了

回复
Kana
一月 28, 2011 10:25:10 #31

我看到js头就好痛….(和这太不熟了….)

回复
Junan
一月 28, 2011 19:28:19 #32

我就暂时不换了~

回复
Mclor
一月 31, 2011 18:56:18 #33

希望继续分享……

回复
- 林木木
  二月 1, 2011 19:06:19
  
  那是肯定的～
  
  回复
荒野无灯
二月 1, 2011 11:25:11 #34

嗯,现在这个代码更灵活更简洁了.

回复
- 林木木
  二月 1, 2011 19:13:19
  
  嘻嘻，荒野新年快乐哈～
  
  回复
老宋
二月 5, 2011 19:08:19 #35

还是不太会呵呵笨了点

回复
囧啊囧
二月 7, 2011 19:16:19 #36

RSS真的抽风了，我又来了一次，这次还发现了两个相同的表情

回复
- 林木木
  二月 12, 2011 15:59:15
  
  不知道换成哪一个诶……
  
  回复
独自流浪
三月 3, 2011 11:06:11 #37

木木，我不会改
Html部分和jQuery部分的代码该加在主题的那个地方？

回复
- 无冷
  三月 22, 2011 09:58:9
  
  html可以放在footer，也可以放header，js嘛加进去就行，这个看你的js在哪里，直接往以前的js加也行，单独建一个js也行
  
  回复
无冷
三月 22, 2011 09:56:9 #38

这个东西强大无比

回复

木木木木木

[jQuery] 滑动导航代码小更新

发表评论取消回复

发表评论 取消回复

发表评论取消回复