JS百度分享栏

今天我们讨论一个百度分享栏， 当然其中用的动画知识，

也是之前动画的缓冲运动的内容，这里只是当作案例罢了！

其实原理很简单，无非鼠标移入移出时，触动的动画。

接下来是代码部分：

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">人人网</a></li>
<li><a href="###" class="d">百度相册</a></li>
<li><a href="###" class="e">腾讯朋友</a></li>
<li><a href="###" class="f">豆瓣网</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">开心网</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实现动画效果

// 百度分享栏
$("#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
});
});