wordpress笔记之上下滑动条
从今天开始，我要开始一个折腾笔记，记录我折腾博客的过程。当然这里面会引用很多来自其他博客的文章。因为以后不打算再去那么折腾了，所以就全当是一个记录，以后如果自己写主题的话也是一种帮助。
由于折腾博客的时候没有像狐狸博客（这是一个很不错的博客啊，博主可是我们学院的大牛！）那样去规划，也就是看到什么好看，感觉适合我的主题，符合我的审美观，我就去折腾什么，所以整个笔记也不会有什么条理，我想到什么就去记录什么。这个笔记中的所有效果并不一定在本站能够看到，因为许多已经放弃了，但我还会做一个记录。
废话不多说什么了，先说说这个上下的滑动条，原文是来自林木木的文章，这里针对博客也做出了相应的修改。
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库,至于哪个版本我就没有研究了.至于那个上下滑动的图片可以根据自己的喜好自由定义.
这是折腾笔记的第一篇.
44 条评论
😄
刚开始就结束啊？