jQuery幕帘拉伸效果带关闭按钮
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>无标题文档</title>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<style>
*{margin:0;padding:0;}
img{border:none;}
#content{width:960px; margin:0 auto; position:relative;}
#bannerSmall,#bannerBig,.close{display:none;}
.close{height:30px; background:#333333; position:absolute; top:0; right:0; color:#FFFFFF; width:960px; text-align:right;filter:Alpha(Opacity=50); opacity:0.5;}
</style>
<script type=”text/javascript”>
$(function(){
$(“#bannerBig”).slideDown(2000,function(){
$(“.close”).slideDown();
});
$(“.close”).click(function(){
if($(“#bannerBig”).is(“:visible”)){
setTimeout(“showBanner(‘bannerBig’,'bannerSmall’);”,500);
$(this).html(“展开”);
}else{
setTimeout(“showBanner(‘bannerSmall’,'bannerBig’);”,500);
$(this).html(“关闭”);
}
});
});
function showBanner(a,b){
$(“#”+a).slideUp(1000,function(){$(“#”+b).slideDown(500);});
}
</script>
</head>
<body>
<div id=”content”>
<div id=”bannerBig”><a target=”_blank” href=”#”><img src=”http://www.huqiao.net/a.jpg”></a></div>
<div id=”bannerSmall”><A target=”_blank” href=”#”><IMG src=”http://www.huqiao.net/b.jpg”></A></DIV>
<div>关闭</div>
</div>
</body>
</html>
图片可以自己找两张，也可以做个漂亮的关闭按钮。
No comments yet.