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库,至于哪个版本我就没有研究了.至于那个上下滑动的图片可以根据自己的喜好自由定义.
这是折腾笔记的第一篇.
围观学习 哦哦~!
得,我应该向你学习才对[face:han][face:han]
拿来主义呀!
[face:daxiao]
嘿嘿,这叫中国特色拿来主义
博客里面没有这个效果啊
有的,在左边,不过不明显~就是那两个四叶草
这博客够个性,小人不错,有空可以改造玩玩
呵呵,不过我现在感觉有点卡了,好慢~
感觉折腾博客样式很累
嗯,相当累啊~很复杂~
淡定地围观博主折腾。等你技术纯熟了,我再来折腾。
我去,我根本没有技术的说~
你这个上上下下的图标倒是和网站背景和相合
嗯嗯,特意为自己的博客改造的~
开始一个折腾笔记,以后不打算继续折腾~~~~[face:han]
刚开始就结束啊?
没有,以后要学学代码了,来点高级的折腾,嘿嘿[face:guilian]
top按键啊...
top按键?没有听过~~~~
到顶部不是TOP哈。。
你所说的是“home”这个键?
[face:han]我以为你更新了呢,呵呵。支持你一下啊!
呵呵,也算更新
嘻嘻 发现安了个微软雅黑字体看你的网站精致了好多
嗯,我的字体一直用雅黑,别的字体有点难看的
这个滚动条看不太清楚!一下子真找不到!
嗯,这个跟背景有点重合了,也不去管了~
为什么我老会进你的博客呢==
呵呵,欢迎常来~~~[face:daxiao]
传说找到四叶草就找到了幸福,呵呵
四叶草是代表幸运的~
我感觉速度还是可以的啊,是不是因为我用的6m的电信的呢,娃哈哈
应该是的吧,我这个主机还可以~
呵呵,这个漂浮的小孩子挺有意思哦!
呵呵,这是一个博客小宠物~
这些技巧我还是懂不了的。
这个就是自己瞎折腾,华而不实~
不错~我的也是在wp博客偷过来的[face:daxiao]
哦,貌似你的博客的主题也是wp博客改的吧,很好看
看上去挺专业的呢~[face:daxiao]
这么专业就 谈不上了,只是自己做的一点笔记
亲 这个小人物太鸡肋了。一直在上面来回的。。。影响用户体验的说。
额,我就这么一个小宠物了,只是他脾气有点不好而已,最近也在修改,无奈看不懂jq代码
现在情况好点了。
这个小东西用jq写的,根本读不懂,好难调教