第一百四十六节，JavaScript，百度分享保持居中--下拉菜单
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: 0; left:-211px; background:#fff; } #share h2 { height:30px; line-height:30px; background:#eee; padding:0; margin:0; 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: 0; 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:0; 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(); } }); });
先必须引入函数库和封装库
