A Coder

Coding My Dream!

0%

Jquery上下浮动滚动的捣鼓方法

今天出去游玩了,早上睡到了89点,呵呵,起来约了几个朋友一起去西溪玩,呵呵,风景是很不错的,但是交通实在是不行!具体内容,我的朋友会写,我做个链接过去《西溪之行》 ,哈哈 真懒……穹庐小屋

言归正传,今天向大家分享一下,使用jquery在博客中加入向上向下滚动的功能,和淡入淡出 在右下角的订阅图片功能,呵呵!

引入jquery库,如果已经引入,直接忽略!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

将html部分加入到前

<div id="updown">
<div id="up"></div>
<div id="comt"></div>
<div id="down"></div>
</div>

将CSS部分加入到CSS文件中

#updown {
 display:block;
 left:50%;
 margin-left:-520px;  /*设置横向位置*/
 position:absolute;
 top:40%;  /*设置纵向位置*/
 }
 #up {
 background:url(images/updown.gif) -34px 0 no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }
#comt {
 background:url(images/updown.gif) no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }
 #down {
 background:url(images/updown.gif) -68px 0 no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }

在主题文件的js中加入一下部分

jQuery(document).ready(function (a) {
    var c = a("#updown").offset().top;
    $body = window.opera ? document.compatMode == "CSS1Compat" ? a("html") : a("body") : a("html,body");
    a(window).scroll(function () {
        a("#updown").animate({
            top: a(window).scrollTop() + c + "px"
        },
 {
     queue: false,
     duration: 500
 })
    });
    a("#up").click(function () {
        $body.animate({
            scrollTop: "0px"
        },
 1000)
    });
    a("#down").click(function () {
        $body.animate({
            scrollTop: a("#footer").offset().top
        },
 1000)
    });
    a("#comt").click(function () {
        $body.animate({
            scrollTop: a("#comments").offset().top
        },
 1000)
    })
});

用到的图片updown在css样式里修改图片地址