记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > jQuery特效 > 滑动侧边导航栏jQuery来实现

滑动侧边导航栏jQuery来实现

Tags: | | 作者:海天无影

今天是周末,所以昨天夜里海天很正常的玩到很晚,今天也很正常的很晚的才起来。不过现在好多了,海天现在星期天睡到2点左右就自己醒了,要是原来尽饱睡睡到个四五点钟。起来以后收拾下就去参加朋友的婚礼,婚礼嘛,就那样,没什么好介绍的,呵呵。

参加完婚礼回来是比较晚了,不过闲着也是无事,海天不能断更哈,就翻了下博客,看看有什么好的东西拿出来分享。于是就有了这篇的文章《滑动侧边导航栏jQuery来实现》

侧边滑动导航栏

侧边滑动导航栏

滑动侧边导航栏的效果,大家刻意看海天的博客文章页的左侧,那个会随着页面滚动而滑动的导航栏,点击按钮后可以返回顶部、到达底部或评论的功能,见右图:

功能是在木木同学那儿看到的,此方法差不多能够通用在各个浏览器下,而且滑动效果也还是很不错的。加上滑动侧边导航栏,碰到很长的页面不再需要一点点的向下挪动,而且可以直接点击到达评论区,相当的提高用户体验。当然你还可以加上其他自己想要的功能,比如订阅RSS等功能,都是可以实现的。方法如下:

1、将图片文件上传至主题中images文件夹中。 download-下载,侧边滑动导航栏文件

2、将以下代码加入到主题中的footer.php文件末位的</body>之前:

<div id="shangxia" style="top: 300px;"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>

3、将以下CSS样式代码加到主题的Style.css末尾:

#shangxia{position:absolute;top:40%;left:50%;margin-left:-520px;display:block;z-index:2;}
#shang{background:url(images/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(images/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(images/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}

4、在主题的head.php文件中的 JS代码部分 添加下面代码:

<script type="text/javascript">
jQuery(document).ready(function($){
var s= $('#shangxia').offset().top; //取得id="shangxia"元素相对当前窗口的高度,并赋值给 s
$(window).scroll(function (){ //浏览器滚动条触发事件
$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});
//添加id="shangxia"元素自定义动画,使其滑动"滚动条距顶部高度+ s "距离,动画过程为500毫秒;
});
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
//点击id="shang"对象时,滑动至相对浏览器滚动条为0px(即顶部),时间为800毫秒
$('#comt').click(function(){$('html,body').animate({scrollTop:$('.commentlist').offset().top}, 800);});
//点击id="comt"对象时,滑动至id="comment"相对浏览器滚动条的距离,时间为800毫秒
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
</script>

最后,还需要调用jQuery库,但需要注意的是,这里不能用GOOGLE的mini 1.3.2版的jQ库,正如海天上次一篇文章《图片适当载入渐显特效,基于jQuery.Lazyload》中所说,GOOGLE的mini 1.3.2版的jQ库没有这两篇文章所需的jQ程序。所以大家还是一样使用Wordpress自带的jQ库吧。
文件位于:/wp-includes/js/jquery/jquery.js。
调用方法:
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>

日志信息 »

该日志于2010-05-16 22:08由 海天无影 发表在jQuery特效分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

32条评论▼点击进行评论

  1. 在很多地方都看到这个按钮组了

    • 呵呵 是啊
      滑动效果不错,而且你也可以添加自己想要的功能~

  2. 这段js代码貌似只能在php中用。 :|

    • 额 是 吗?
      这个不是JS吗?JS 不是通用的吗?

    • ……JQ..ASP,HTML下也可以用的,跟php没什么关系

      • 因为这段js里面传递了php变量,所以要换在其它的语言中应用,还得稍微改一下.

  3. 不错,可以一试

  4. 原来海天侧边栏上的flash是时钟啊 今天突然发现

    • 额 时钟是右侧边
      那你原来以为是什么啊 呵呵~

      • 我原以为是什么小游戏呢 :mrgreen:

  5. 这玩意跟个小尾巴似的,怎么也甩不掉。

    • 哈哈 就是要你甩不掉
      让你随用随到

  6. 昨晚出去k歌了~
    今天把回访都补上~

    • 呵呵 K歌啊 看来玩的很开心的啊~ :lol:

  7. 这个小东西很好

  8. 好长时间没来看海天了,今天特意来光临。

  9. 最好让它固定,滑动有点头晕 :mrgreen:

    • 额 可能是在评论区那一块 图片要加载 会卡一点 出现的问题吧
      我来先把评论头像图片 直接加载吧
      很多人反应会卡~
      你再帮忙看看滑动是不是会流畅很多~

  10. 很好很强大,我喜欢,回头搞个去

    • 呵呵 加一个 比较方便用户的

  11. 固定在中间不是很好吗?

    • 额 比较新奇好玩啊
      话说可能能增加点UEO吧~

  12. 那个最后一行代码,也就是jQuery库,应该放在哪里呀?

    • 最后一个调用jQ库的要放在页面的前面
      一般放在前面 调用js代码之前

      • 呵呵,一般都是放在header.php的哈。我用的是WP

  13. 菜鸟来请教一下。1.header.php里的js部分在哪里,怎么没有见到啊
    2.调用js,具体怎么调用,还望耐心解答一下。
    ishoage@gmail.com

    • 看了你的博客 你的博客本身没有调用过js
      那你就放在css下面
      调用方法 我文章最后一句就是调用方法啊

  14. :cry: 我的博客貌似实现不了,如果博主有空帮我看一下,耐心等待…Thx!

    • 因为我不好修改 帮你猜测几个吧
      一、感觉js没有调用上
      1、看看代码中有没错误,会不会有标点的半角全角问题
      2、将代码加入到你主题的js文件调用中
      3、换个jQ库,我看你那个虽然是1.3.2但里面貌似是1.4.2
      二、将div层放到hearder.php文件试试

      • 貌似这个主题没有调用js,所以可以把js代码和调用jq库的代码放到header.php中的head里么?

        • 恩 可以的
          调用js和jQ 也可以放在footr.php中

  15. 我正的不会滑动。不知道哪里出问题了。

  16. :cry: 倒霉我在本地测试了,图片挂在哪里居然不动声色。看了看代码毛错

    可以的话麻烦到我blog叫下我···试了都不行

    • 额 才看到
      但貌似没有了

      • 不会动好给我删了···一般是那没设置好

  17. 我的也是啊,有样子没效果。图片挂在那里不动,是什么问题呢?

    • 额 不好意思啊 才看到
      你是 不是js没加载呢?

  18. SOS 为什么我的不能动~~~

    • 额 不好意思啊 才看到
      看来你已经解决了啊

  19. 我的点向下的也是向上
    点评论也没反应

    • 额 不好意思啊 才看到
      你是 不是js没加载呢?
      你的网站打不开了

  20. 能帮忙看看啥问题不?没反应啊

  21. 呵呵 我都按这做了乍没反应呢?

  22. 请问怎么固定在侧栏

    • 竟然发现乃了。。。

      • 囧。。。我已经成功了。。

  23. 不会浮动也不能按。。
    估计我有什么放错位置了。。
    第4步的代码和调用放哪里?

  24. 请问调用js那段代码应该放在哪儿啊 我是新手 不懂诶

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

« 周杰伦2010年最新专辑《跨时代》试听下载 Dropbox不能用了,看看金山快盘怎么样 »