WordPress添加滑动条_返回顶部-查看评论-返回底部

2011-05-26 | 夜光 | IT记录| 发表评论

(1)加载jQuery库,将slide.js放入js目录,将slide.gif | 下载» | 放入img目录。

slide.js文件内容为:

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);});
$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});
});

(2)在主题footer.php中添加如下代码:

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

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

#shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;}
#shang{background:url(img/slide.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(img/slide.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(img/slide.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
本文标签: ,
本文链接: http://boliquan.com/slide-top-comment-bottom/
版权所有: 玻璃泉, 转载请注明本文出处。

1个评论

  1. 挺好的技術性的東西
    i like it

  2. 学习了,这就弄上去

发表评论

您的昵称 *

您的邮箱 *

您的网站

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

Protected by WP Anti Spam