25.1-博客前端：封装库--百度分享侧栏

学习要点：

1.问题所在
2.设置代码

百度分享侧栏是目前使用最广泛的一种分享工具，虽然他并不需要我们自己做，只需要
引入相关代码，但我们还是需要了解一下这种效果是如何完成的。

一．问题所在

第一步，先使用 CSS 把百度侧栏分享滑动的样式整理好。
第二步，滑动的侧栏主要是由鼠标移入移出的事件完成的。

二．设置代码

1.百度分享的 HTML 代码，这里，非 JS 代码，我们采用理解后复制的方法以节约时间。

<div id="share">
            <h2>分享到</h2>
            <ul>
                <li>
                    <a href="javascript:;" class="a">一键分享</a>
                </li>
                <li>
                    <a href="javascript:;" class="b">新浪微博</a>
                </li>
                <li>
                    <a href="javascript:;" class="c">人人网</a>
                </li>
                <li>
                    <a href="javascript:;" class="d">百度相册</a>
                </li>
                <li>
                    <a href="javascript:;" class="e">腾讯朋友</a>
                </li>
                <li>
                    <a href="javascript:;" class="f">豆瓣网</a>
                </li>
                <li>
                    <a href="javascript:;" class="g">百度新首页</a>
                </li>
                <li>
                    <a href="javascript:;" class="h">和讯微博</a>
                </li>
                <li>
                    <a href="javascript:;" class="i">QQ 空间</a>
                </li>
                <li>
                    <a href="javascript:;" class="j">百度搜藏</a>
                </li>
                <li>
                    <a href="javascript:;" class="k">腾讯微博</a>
                </li>
                <li>
                    <a href="javascript:;" class="l">开心网</a>
                </li>
                <li>
                    <a href="javascript:;" class="m">百度贴吧</a>
                </li>
                <li>
                    <a href="javascript:;" class="n">搜狐微博</a>
                </li>
                <li>
                    <a href="javascript:;" class="o">QQ 好友</a>
                </li>
                <li>
                    <a href="javascript:;" class="p">更多...</a>
                </li>
            </ul>
            <div class="share_footer">
                <a href="javascript:;">百度分享</a><span></span></div>
        </div>

css代码

#share {
width:210px;
height:315px;
border:1px solid #ccc;
position:absolute;
top:0;
left:-211px;
background:#fff;
}
#share h2 {
height:30px;
line-height:30px;
margin:0;
padding:0;
background:#eee;
font-size:14px;
color:#666;
text-indent:10px;
}
#share ul {
padding:3px 0 2px 5px;
height:254px;
}
#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 5px;
}
#share ul li a.b {
background-position:5px -25px;
}

PS：每个图标背景，每次加 30 个像素即可。

#share .share_footer {
background:#eee;
height:26px;
position:relative;
}
#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;
}
#share .share_footer a {
position:absolute;
top:7px;
left:140px;
text-decoration:none;
color:#666;
padding:0 0 0 13px;
background:#eee url(images/share_bg.png) no-repeat 0 -477px;
}
#share .share_footer a:hover {
color:#06f;
}

3.JavaScript 代码

//百度分享初始位置
$('#share').css('top', (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2
+ 'px');
//百度分享收缩功能
$('#share').hover(function () {
$(this).animate({
attr : 'x',
target : 0
});
}, function () {
$(this).animate({
attr : 'x',
target : -211
});
});

PS：在 IE 浏览器实现 PNG 透明度的时候，会出现黑点问题，加上背景色即可。滑动时默认速度太慢，我们调整为 T 10，STEP 20，为默认。以后出现其他速度在调用时调正。