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库,至于哪个版本我就没有研究了.至于那个上下滑动的图片可以根据自己的喜好自由定义.

这是折腾笔记的第一篇.

 标签: 折腾, 笔记, 滑动条, wordpress

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。


  1. 雨帆
    1#
    雨帆

    围观学习 哦哦~!

    September 16th, 2011 at 06:02 pm 回复
      1. sailor
        sailor

        得,我应该向你学习才对[face:han][face:han]

        September 16th, 2011 at 06:04 pm 回复
  2. 拿来主义呀!
    [face:daxiao]

    September 16th, 2011 at 06:15 pm 回复
      1. sailor
        sailor

        嘿嘿,这叫中国特色拿来主义

        September 18th, 2011 at 12:28 am 回复
  3. DH
    3#
    DH

    博客里面没有这个效果啊

    September 16th, 2011 at 06:22 pm 回复
      1. sailor
        sailor

        有的,在左边,不过不明显~就是那两个四叶草

        September 18th, 2011 at 12:28 am 回复
  4. walfred
    4#
    walfred

    这博客够个性,小人不错,有空可以改造玩玩

    September 16th, 2011 at 09:08 pm 回复
      1. sailor
        sailor

        呵呵,不过我现在感觉有点卡了,好慢~

        September 18th, 2011 at 12:29 am 回复
  5. C瓜哥
    5#
    C瓜哥

    感觉折腾博客样式很累

    September 16th, 2011 at 10:24 pm 回复
      1. sailor
        sailor

        嗯,相当累啊~很复杂~

        September 18th, 2011 at 12:30 am 回复
  6. 面条
    6#
    面条

    淡定地围观博主折腾。等你技术纯熟了,我再来折腾。

    September 17th, 2011 at 09:17 am 回复
      1. sailor
        sailor

        我去,我根本没有技术的说~

        September 18th, 2011 at 12:31 am 回复
  7. 邓肯
    7#
    邓肯

    你这个上上下下的图标倒是和网站背景和相合

    September 17th, 2011 at 11:19 am 回复
      1. sailor
        sailor

        嗯嗯,特意为自己的博客改造的~

        September 18th, 2011 at 12:31 am 回复
  8. harry_L
    8#
    harry_L

    开始一个折腾笔记,以后不打算继续折腾~~~~[face:han]
    刚开始就结束啊?

    September 17th, 2011 at 02:59 pm 回复
      1. sailor
        sailor

        没有,以后要学学代码了,来点高级的折腾,嘿嘿[face:guilian]

        September 18th, 2011 at 12:32 am 回复
  9. 阿疯
    9#
    阿疯

    top按键啊...

    September 17th, 2011 at 03:27 pm 回复
      1. sailor
        sailor

        top按键?没有听过~~~~

        September 18th, 2011 at 12:33 am 回复
          1. 到顶部不是TOP哈。。

            September 19th, 2011 at 05:18 pm 回复
              1. sailor
                sailor

                你所说的是“home”这个键?

                September 24th, 2011 at 11:01 pm 回复
  10. [face:han]我以为你更新了呢,呵呵。支持你一下啊!

    September 17th, 2011 at 03:51 pm 回复
      1. sailor
        sailor

        呵呵,也算更新

        September 18th, 2011 at 12:33 am 回复
  11. netyang
    11#
    netyang

    嘻嘻 发现安了个微软雅黑字体看你的网站精致了好多

    September 17th, 2011 at 06:01 pm 回复
      1. sailor
        sailor

        嗯,我的字体一直用雅黑,别的字体有点难看的

        September 18th, 2011 at 12:34 am 回复
  12. 于泽鹏
    12#
    于泽鹏

    这个滚动条看不太清楚!一下子真找不到!

    September 18th, 2011 at 10:08 am 回复
      1. sailor
        sailor

        嗯,这个跟背景有点重合了,也不去管了~

        September 19th, 2011 at 12:25 am 回复
  13. netyang
    13#
    netyang

    为什么我老会进你的博客呢==

    September 18th, 2011 at 10:55 am 回复
      1. sailor
        sailor

        呵呵,欢迎常来~~~[face:daxiao]

        September 19th, 2011 at 12:26 am 回复
  14. 车仪
    14#
    车仪

    传说找到四叶草就找到了幸福,呵呵

    September 18th, 2011 at 11:02 am 回复
      1. sailor
        sailor

        四叶草是代表幸运的~

        September 19th, 2011 at 12:26 am 回复
  15. walfred
    15#
    walfred

    我感觉速度还是可以的啊,是不是因为我用的6m的电信的呢,娃哈哈

    September 18th, 2011 at 11:09 am 回复
      1. sailor
        sailor

        应该是的吧,我这个主机还可以~

        September 19th, 2011 at 12:27 am 回复
  16. huangjun
    16#
    huangjun

    呵呵,这个漂浮的小孩子挺有意思哦!

    September 18th, 2011 at 02:12 pm 回复
      1. sailor
        sailor

        呵呵,这是一个博客小宠物~

        September 19th, 2011 at 12:27 am 回复
  17. 这些技巧我还是懂不了的。

    September 18th, 2011 at 10:16 pm 回复
      1. sailor
        sailor

        这个就是自己瞎折腾,华而不实~

        September 19th, 2011 at 12:29 am 回复
  18. Sogei
    18#
    Sogei

    不错~我的也是在wp博客偷过来的[face:daxiao]

    September 19th, 2011 at 04:32 am 回复
      1. sailor
        sailor

        哦,貌似你的博客的主题也是wp博客改的吧,很好看

        September 24th, 2011 at 11:02 pm 回复
  19. debin
    19#
    debin

    看上去挺专业的呢~[face:daxiao]

    September 23rd, 2011 at 06:57 pm 回复
      1. sailor
        sailor

        这么专业就 谈不上了,只是自己做的一点笔记

        September 24th, 2011 at 11:02 pm 回复
  20. Demon
    20#
    Demon

    亲 这个小人物太鸡肋了。一直在上面来回的。。。影响用户体验的说。

    October 2nd, 2011 at 12:34 pm 回复
      1. sailor
        sailor

        额,我就这么一个小宠物了,只是他脾气有点不好而已,最近也在修改,无奈看不懂jq代码

        October 20th, 2011 at 03:35 am 回复
          1. 现在情况好点了。

            October 21st, 2011 at 08:51 am 回复
              1. sailor
                sailor

                这个小东西用jq写的,根本读不懂,好难调教

                October 21st, 2011 at 01:18 pm 回复


关于我

about me

sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。

联系我

最新文章