一個(gè)百度分享欄， 當(dāng)然其中用的動(dòng)畫知識(shí)，
也是之前動(dòng)畫的緩沖運(yùn)動(dòng)的內(nèi)容，這里只是當(dāng)作案例罷了！
其實(shí)原理很簡單，無非鼠標(biāo)移入移出時(shí)，觸動(dòng)的動(dòng)畫。
接下來是代碼部分：
HTML頁面

<div id="share">
    <h2>分享到</h2>
    <ul>
        <li><a href="###" class="a">一鍵分享</a></li>
        <li><a href="###" class="b">新浪微博</a></li>
        <li><a href="###" class="c">人人網(wǎng)</a></li>
        <li><a href="###" class="d">百度相冊(cè)</a></li>
        <li><a href="###" class="e">騰訊朋友</a></li>
        <li><a href="###" class="f">豆瓣網(wǎng)</a></li>
        <li><a href="###" class="g">百度新首頁</a></li>
        <li><a href="###" class="h">和訊微博</a></li>
        <li><a href="###" class="i">QQ 空間</a></li>
        <li><a href="###" class="j">百度搜藏</a></li>
        <li><a href="###" class="k">騰訊微博</a></li>
        <li><a href="###" class="l">開心網(wǎng)</a></li>
        <li><a href="###" class="m">百度貼吧</a></li>
        <li><a href="###" class="n">搜狐微博</a></li>
        <li><a href="###" class="o">QQ 好友</a></li>
        <li><a href="###" class="p">更多...</a></li>
    </ul>
    <div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>

CSS樣式表

/*百度分享*/
#share {
    width : 210px;
    height: 315px;
    border:1px solid #ccc;
    position: absolute;
    top: 100px;
    left:-211px;
}
#share h2 {
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    background: #eee;
    font-size: 14px;
    color:#666;
    text-indent: 10px;
}
#share ul{
    height: 254px;
    padding : 3px 0 2px 5px;
    background:#fff;
}
#share ul li {
    width: 96px;
    height: 28px;
    padding : 2px;
    float : left;
}
#share ul li a {
    display: block;
    width: 95px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    text-indent: 30px;
    background-image: url(images/share_bg.png);
    background-repeat: no-repeat;
    color: #666;
}
#share ul li a.a {
    background-position: 5px 4px;
}
#share ul li a.b {
    background-position: 5px -26px;
}
#share ul li a.c {
    background-position: 5px -56px;
}
#share ul li a.d {
    background-position: 5px -86px;
}
#share ul li a.e {
    background-position: 5px -116px;
}
#share ul li a.f {
    background-position: 5px -146px;
}
#share ul li a.g {
    background-position: 5px -176px;
}
#share ul li a.h {
    background-position: 5px -206px;
}
#share ul li a.i {
    background-position: 5px -236px;
}
#share ul li a.j {
    background-position: 5px -266px;
}
#share ul li a.k {
    background-position: 5px -296px;
}
#share ul li a.l {
    background-position: 5px -326px;
}
#share ul li a.m {
    background-position: 5px -356px;
}
#share ul li a.n {
    background-position: 5px -386px;
}
#share ul li a.o {
    background-position: 5px -416px;
}
#share ul li a.p {
    background-position: 5px -446px;
}
#share ul li a:hover {
    opacity: 0.7;
    filter :alpha(opacity=70);
    background-color: #eee;
    color:#06f;
}
#share .share_footer {
    height: 26px;
    background: #eee;
    position: relative;
}
#share .share_footer a {
    position: absolute;
    top:7px;
    left:140px;
    padding:0px 0px 0 20px;
    background: #eee url(images/share_bg.png) no-repeat 0 -450px;
    text-decoration: none;
    color: #666;
}
#share .share_footer a:hover {
    color:#06f;
    opacity: 0.7;
    filter : alpha(opacity=70);
}
/*分享按鈕*/
#share .share_footer span {
    display: block;
    width : 24px;
    height: 88px;
    background:url(images/share.png) no-repeat;
    position: absolute;
    top: -230px;
    left: 210px;
    cursor: pointer;
}

JS實(shí)現(xiàn)動(dòng)畫效果

// 百度分享欄
$("#share").css("top", (getInner().height - parseInt(getStyle($("#share").first(), "height"))) / 2 + 'px');
$("#share").hover(function () {
    $(this).animate({
        attr : "x",
        target : -1
    });
}, function () {
    $(this).animate({
        attr : "x",
        target : -211
    });
});