闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

wordpress笔记之上下滑动条

2011-09-16 约 1 分钟读完 搬砖秘籍

从今天开始,我要开始一个折腾笔记,记录我折腾博客的过程。当然这里面会引用很多来自其他博客的文章。因为以后不打算再去那么折腾了,所以就全当是一个记录,以后如果自己写主题的话也是一种帮助。

由于折腾博客的时候没有像狐狸博客(这是一个很不错的博客啊,博主可是我们学院的大牛!)那样去规划,也就是看到什么好看,感觉适合我的主题,符合我的审美观,我就去折腾什么,所以整个笔记也不会有什么条理,我想到什么就去记录什么。这个笔记中的所有效果并不一定在本站能够看到,因为许多已经放弃了,但我还会做一个记录。

废话不多说什么了,先说说这个上下的滑动条,原文是来自林木木的文章,这里针对博客也做出了相应的修改。

html部分

<div id="shangxia">
<div id="shang" title="飞到顶"></div>
<div id="xia" title="滑到底"></div></div>

CSS部分

#shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;}
#shang{background:url(images/xiangshang.png) no-repeat;position:relative;cursor:pointer;height:60px;width:40px;margin:50px 0;}
#xia{background:url(images/huadong.png) no-repeat ;position:relative;cursor:pointer;height:60px;width:40px;margin:50px 0;}

 

jQ部分

//滑动导航 jQuery(document).ready(function (a) { var c = a("#shangxia").offset().top; $body = window.opera ? document.compatMode == "CSS1Compat" ? a("html") : a("body") : a("html,body"); a(window).scroll(function () { a("#shangxia").animate({ top: a(window).scrollTop() + c + "px" }, { queue: false, duration: 500 }) }); a("#shang").click(function () { $body.animate({ scrollTop: "0px" }, 1000) }); a("#xia").click(function () { $body.animate({ scrollTop: a("#footer_wrap").offset().top }, 1000) }); });

就这些了,要说明的是用jq之前要先加载jq库,至于哪个版本我就没有研究了.至于那个上下滑动的图片可以根据自己的喜好自由定义.

这是折腾笔记的第一篇.