欢迎来 起落博客 加入收藏 设为主页

wordpress教程:2011-07-12 起落博客



呵呵 忙里偷闲来折腾一下啦

也算是完成了长久的一个心愿

那就是给我的博客加上了浮动按钮(回顶部评论回底部

感谢爱折腾jquery的林木木的技术性文章~~~

(另:对wordpress越来越有爱了)

首先涉及到header的:前提调用jquery <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script>

然后判断,首页不用显示评论按钮
<?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 } ?>
<script type="text/javascript" >
jQuery(document).ready(function($){ //要用这个把jQuery代码都包裹起来,不然里面的都无效~
  $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
//点击id="shang"对象时,滑动至相对浏览器滚动条为0px(即顶部),时间为800毫秒
$('#comt').click(function()
{$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
//点击id="comt"对象时,滑动至id="comment"相对浏览器滚动条的距离,时间为800毫秒
$('#xia').click(function()
{$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
});
</script>

涉及到CSS的:

#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
/* 使用fixed使id=“shangxia”的对象固定于浏览器中,相对的上距离为40%,左距离为50%(即居中),
然后向左移动520px(需自行调整!!!) */
#shang{background:url(images/huadong.gif) no-repeat;position:relative;cursor:pointer;
height:42px;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;}
#comt{background:url(images/huadong.gif) no-repeat center -45px;
position:relative;cursor:pointer;
height:32px;width:32px;margin:10px 0;}
相关数值请自行调试

最后就差小图片了,感谢cncy360.com网站的提供。。。
上传,完工!



 

原创文章,转载请注明:起落SEO博客
本文链接地址: http://76tui.net/archives/698.html

6 个评论:

  1. 还不错的吗加油

    [回复]

    uknow 回复:

    谢谢~~加油

    [回复]

    静脉曲张袜 said on: 12/07/2011 16:33 | Windows XP | Internet Explorer 6.0
  2. 大家好

    [回复]

    佛山物流公司 said on: 12/07/2011 17:12 | Windows 7 | Internet Explorer 8.0
  3. 以前也弄过 后来升级的时候就去掉了

    [回复]

    uknow 回复:

    个人感觉还是挺实用的 对用户友好

    [回复]

    网络营销案例 said on: 12/07/2011 17:24 | Windows XP | Internet Explorer 8.0
  4. 用户体验是第一位啊。。。。。。

    [回复]

    uknow 回复:

    是啊 越来越重视用户体验

    [回复]

    小宇博客 said on: 12/07/2011 20:02 | Windows XP | Internet Explorer 6.0
  5. 个人感觉还是挺实用的

    [回复]

    uknow 回复:

    呵呵 希望对你有用

    [回复]

    祛痘产品 said on: 12/07/2011 20:34 | Windows XP | Internet Explorer 6.0
  6. 我也很喜欢这个程序

    [回复]

    uknow 回复:

    嘿嘿 是不错呢

    [回复]

    红涛SEO博客 said on: 12/07/2011 23:42 | Windows 7 | Firefox 5.0

发表评论

Your email is never published nor shared. Required fields are marked *

*

*

=7520*

输入您的评论:


评论