JavaScript，百度分享保持居中--下拉菜单
百度分享保持居中
效果图
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:;
left:-211px;
background:#fff;
}
#share h2 {
height:30px;
line-height:30px;
background:#eee;
padding:;
margin:;
font-size:14px;
color:#666;
text-indent:10px;
}
#share ul {
height:254px;
padding:3px 0 2px 5px;
}
#share ul li {
width:96px;
height:28px;
float:left;
padding:2px;
}
#share ul li a {
display:block;
width:95px;
height:26px;
line-height:26px;
text-decoration:none;
color:#666;
background-image:url('img/share_bg.png');
background-repeat:no-repeat;
text-indent:30px;
}
#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.n {
background-position:5px -356px;
}
#share ul li a.m {
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:0 0 0 13px;
background:#eee url('img/share_bg.png') no-repeat 0 -477px;
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;
position:absolute;
top:-178px;
left:210px;
background:url('img/share.png') no-repeat;
cursor:pointer;
}
前台js代码
// 百度分享
//获取百度分享区块让它垂直居中，滚动条头部位置加浏览器窗口高度，减去百度分享高度除以2，等于居中位置
$('#share').c_css('top',gun_dong_tiao_wei_zhi().top + (getInner().height - yuan_su_da_xiao($('#share').jie_dian[0]).height) / 2 + 'px'); addEvent(window,'scroll',function () { //滚动条事件，当拖动滚动条时执行居中
$('#share').yi_dong_tou_ming({
'attr': 'y', //动画方式
'target': gun_dong_tiao_wei_zhi().top + (getInner().height - yuan_su_da_xiao($('#share').jie_dian[0]).height) / 2, //目标量
't': 50, //每次动画时间
'step':20 //跨度
});
}); $('#share').chuang_kou_shi_jian(function () { //窗口变化事件，当拖窗口变化时执行居中
$('#share').yi_dong_tou_ming({
'attr': 'y', //动画方式
'target': gun_dong_tiao_wei_zhi().top + (getInner().height - yuan_su_da_xiao($('#share').jie_dian[0]).height) / 2, //目标量
't': 50, //每次动画时间
'step':20 //跨度
});
});
$('#share').shu_biao_yi_ru_yi_chu(function () { //鼠标移入移出事件
$(this).yi_dong_tou_ming({
'attr': 'x', //动画方式
'target': 0 //目标量
});
},function () {
$(this).yi_dong_tou_ming({
'attr': 'x', //动画方式
'target': -211 //目标量
});
});
下拉菜单
效果图
html
<div class="ge_ren_zhong_xin">个人中心
<ul class="xg">
<li><a href="#">设置</a></li>
<li><a href="#">换肤</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
css
.ge_ren_zhong_xin{
position: relative;
width: 70px;
height: 30px;
line-height: 30px;
float: right;
background: url("img/arrow.png") no-repeat right center;
cursor: pointer;
}
.ge_ren_zhong_xin ul{
width: 100px;
height:;
position: absolute;
top:30px;
right: -15px;
background:#FBF7E1;
border:1px solid #999;
border-top:none;
padding:10px 0 0 0;
filter:alpha(opacity=0);
opacity:;
display:none;
overflow:hidden;
}
.ge_ren_zhong_xin ul li {
height:25px;
line-height:25px;
text-indent:20px;
letter-spacing:1px;
}
.ge_ren_zhong_xin ul li a {
display:block;
text-decoration:none;
color:#333;
background:url("img/arrow3.gif") no-repeat 5px 45%;
}
.ge_ren_zhong_xin ul li a:hover {
background:#fc0 url("img/arrow4.gif") no-repeat 5px 45%;
}
前台js
// 个人中心
$('#tou .ge_ren_zhong_xin').shu_biao_yi_ru_yi_chu(function () {
$(this).c_css('background','url("img/arrow2.png") no-repeat right center');
$('#tou .xg').xian_shi().yi_dong_tou_ming({
't': 50, //每次动画时间
'step': 20, //跨度
mul:{
'h':110,
'o':100
}
});
},function () {
$(this).c_css('background','url("img/arrow.png") no-repeat right center');
$('#tou .xg').xian_shi().yi_dong_tou_ming({
't': 50, //每次动画时间
'step': 20, //跨度
mul:{
'h':0,
'o':0
},
fn:function () {
$('#tou .xg').yin_cang();
}
});
});
先必须引入函数库和封装库