号外!号外!奚少翻.墙成功,开通了Twitter,朋友们可以尽情的follow @xishao 吧!同样我的腾讯微博也为@xishao,大家相互follow哦~(如果有朋友用比较不错的免费SSH的话,不介意分享一下吧~我用的http://feelssh.com/这里的,尽管速度还不错,但是得经常更新密码,对于我这么懒的一个人,无疑是件难事啊...)

以前在林木木那里曾经看到过这个效果,只不过当时对wp折腾的少,所以不敢瞎折腾。呵呵,现在习惯了折腾,于是乎前段时间请教了木木,原来他还有教程,只不过那个对于我有点深奥,代码我都不知道放哪,呵呵。最后无意间请教了Glow,他给了我详细的方法,在此感谢一个~昨天公子问了一下,所以干脆码文出来分享备忘吧!~

入正题:

首先在wordpress主题的header.php中插入一下代码:

<?php if (is_home()) { ?>
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<?php } else { ?>
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
<?php } ?>

目的是为了在首页只显示上下按钮,而在其他页面加入评论按钮。当然你也可以放在任何一个地方,比如我放在footer.php中。。。

2010.12.26更新:接受17同学的建议,将is_home改为!is_singular,目的是在存档、分类等同样只显示上下两个按钮,谢谢17的建议~

接下来是css代码:

/*---------------------shangxia-----------------------*/
#shangxia{position:absolute;top:40%;right:50%;margin-right:-525px;display:block;}
/* 使用fixed使id=“shangxia”的对象固定于浏览器中,相对的上距离为40%,左距离为50%(即居中),然后向右移动525px(需自行调整!!!)。据Jungle同学提示,由于我的主题宽度比较宽,如果在1024×768主题下,漂浮图片只显示一般,所以如果你的主题也是比较款的话,将上代码更改为:#shangxia{position:fixed;top:40%;right:1%;display:block;},相对右边距1% */
#shang,#comt,#xia{background:url(images/huadong.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;}

本样式综合“抄”自木木,希望木木见谅哈~

然后是js部分:(你的主题必须加载了jquery,如果没有加载可以到这里看看,我提到过的哦)

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

差点忘记了个最重要的东西,图片!呵呵,另保存我的图片就ok了...

2010.12.17更新固定不浮动方法:(此方法由Jungle同学提供,在此表示感谢~)

如果不喜欢那种一直漂浮滚动的效果的话(比如oalleno同学就不喜欢),可以在CSS 里

#shangxia{position:absolute;top:40%;right:50%;margin-right:-525px;display:block;}

position:absolute修改为position:fixed 就可以了。

附上一张效果图,万一哪天我撤销了就无图无真相了。。。

WP漂浮到达顶部、底部、评论按钮

看到那面伟大的墙了吧,嘿嘿,折腾了好久,但是css还是有点问题。在个别浏览器下整体和外框相比偏左,右侧很空。如果有朋友是css强人就帮帮我吧,嘿嘿。希望大家踊跃发言,争取墙上有名!

想看原创的就去木木木木木>>“返回顶部”加强版代码及释义

同时也推荐去Glow's blog看看

over!

82,718
更新日期: 2010-12-11
文章标签: ,,
文章链接: http://www.xishao.net/wp/502.html
站方声明: 除特别标注, 本站所有文章均为原创, 互联分享, 尊重版权, 转载请注明.