Archive for 八月, 2010

jQuery幕帘拉伸效果带关闭按钮

  • 八月 14th, 2010
  • Posted in 网络

<!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> 图片可以自己找两张,也可以做个漂亮的关闭按钮。 [ READ MORE ]