滑动导航返回顶部-查看评论-返回底部代码及释义

分享到:


看到很多博客都在左侧或者右侧加上了jQuery的滑动导航按钮,方便读者使用(毕竟绝大部分人不经常使用键盘上的Home和End按钮),而且安装也很简单一句html插入代码、一句CSS美化代码、一句jQuery滑动代码,轻松搞定!(效果请见本博客左侧动态滑动导航)

下面介绍方法.

1.加载jQuery库,把下面内容保存成slide.js放入当前主题js目录,将slide.png放入img目录(js和img文件夹没有请自行创建)

slide.png下载地址:1.GoogleCode托管 | 2.SkyDrive托管 | 3.DropBox托管 (3个地址内容相同任选其一下载即可)

1
2
3
4
5
6
7
8
9
jQuery(document).ready(function($){
var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
//点击id="shang"对象时,滑动至相对浏览器滚动条为0px(即顶部),时间为400毫秒
$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
//点击id="comt"对象时,滑动至id="comment"相对浏览器滚动条的距离,时间为800毫秒
$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});
});

2.在主题header.php或footer.php中添加如下代码(加入PHP判断代码,首页只显示上下图标,其他有评论图标):

1
2
3
4
5
6
<div id="shangxia">
<div id="shang" title="<?php _e('Top','Deepice.net'); ?>"></div>
<?php if (is_singular()) { ?><div id="comt" title="<?php _e('Comment','Deepice.net'); ?>"></div><?php } ?>
<div id="xia" title="<?php _e('Bottom','Deepice.net'); ?>"></div>
</div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slide.js"></script>

3.在style.css文件中加入以下代码:

1
2
3
4
#shangxia{position:absolute;top:55%;left:51%;margin-left:-535px;display:block;}
/* 使用fixed使id=“shangxia”的对象固定于浏览器中,相对的上距离为55%,左距离为51%(即居中),然后向左移动535px(请根据各自主题宽度自行调整!!!) */
#shang,#comt,#xia{background:url(img/slide.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0;}
#comt{background-position:center -30px;height:32px;}#xia{background-position:center -68px;}

如果操作无误的话,完成这简单的三部你的滑动导航就已经出现在你的博客左侧了~
提示:注意各id(#)或者class(.)之间对应的关系,css中margin-left:-534px;请自行调试!



版权所有© Deepice | 本文采用 BY-NC-SA 进行授权
转载需注明 转自: Deepice|逍遥's Blog
订阅RSS:Feed.Deepice.net


VN:F [1.9.18_1163]
Rating: 9.0/10 (2 votes cast)
VN:F [1.9.18_1163]
Rating: +1 (from 1 vote)
滑动导航返回顶部-查看评论-返回底部代码及释义, 9.0 out of 10 based on 2 ratings

相关日志:

5 Responses to 滑动导航返回顶部-查看评论-返回底部代码及释义

  1. Google Chrome 18.0.1025.168 Google Chrome 18.0.1025.168 Windows 7 Windows 7

    无法实现啊?代码里有错误么? [mad]

    VA:F [1.9.18_1163]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.18_1163]
    Rating: 0 (from 0 votes)
  2. Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows XP Windows XP

    很不错。学习了 [redface] [redface] [redface] [redface]

    VA:F [1.9.18_1163]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.18_1163]
    Rating: 0 (from 0 votes)
  3. Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows XP Windows XP

    有点问题,可能是我菜鸟的原因。呵呵

    VA:F [1.9.18_1163]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.18_1163]
    Rating: 0 (from 0 votes)
  4. Unknown Unknown Unknown Unknown

    够简单的,完全看不明白,只能另寻教程

    VA:F [1.9.18_1163]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.18_1163]
    Rating: 0 (from 0 votes)
  5. Internet Explorer 9.0 Internet Explorer 9.0 Windows 7 x64 Edition Windows 7 x64 Edition

    这个代码非常实用,很喜欢!我在网站上已经部署了哦!
    欢迎到我网站http://www.juhuiwg.com/news

    VA:F [1.9.18_1163]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.18_1163]
    Rating: 0 (from 0 votes)

Leave a Response

You must be logged in to post a comment.