jQuery实现渐变弹出层和弹出菜单的方法
本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现渐变弹出层和弹出菜单</title>
<scripttype="text/javascript"src="/images/jquery.js"></script>
<style>
/*渐变弹出层*/
body{font-size:9pt;}
#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#5551pxsolid;}
.raceShow{background-color:#f1f1f1;border:solid1px#ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}
#UpLayerspan{border:#fff1pxsolid;width:80px;padding:05px;line-height:20px;display:block;}
#UpLayerul{display:none;position:absolute;border:#ccc1pxsolid;width:80px;padding:5px;line-height:20px;background:#f1f1f1;margin:-1px000;}
#UpLayerulli{border-bottom:#ccc1pxdashed;}
</style>
</head>
<body>
<scripttype="text/javascript">
//渐变弹出层
$(document).ready(function(){
varspeed=600;//动画速度
$("#racea").click(function(event){//绑定事件处理
event.stopPropagation();
varoffset=$(event.target).offset();//取消事件冒泡
$("#racePop").css({top:offset.top+$(event.target).height()+"px",left:offset.left});//设置弹出层位置
$("#racePop").show(speed);//动画显示
});
$(document).click(function(event){$("#racePop").hide(speed)});//单击空白区域隐藏
$("#racePop").click(function(event){$("#racePop").hide(speed)});//单击弹出层则自身隐藏
varobjStr="#UpLayer";
$(objStr).mouseover(function(){$(objStr+"ul").show();});
$(objStr).mouseout(function(){$(objStr+"ul").hide();});
});
</script>
<!--渐变弹出层-->
<divid="race"><ahref="#">点击</a></div>
<divid="racePop"class="raceShow">这里是弹出层效果</div>
<divid="UpLayer">
<span><ahref="javascript:void(0)">弹出层</a></span>
<ul>
<li><ahref="http://www.baidu.com">百度搜索</a></li>
<li><ahref="https://www.nhooo.com">毛票票</a></li>
<li><ahref="http://sc.jb51.net">素材之家</a></li>
<li><ahref="http://www.sina.com.cn/">新浪首页</a></li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。