一个Banner广告收缩效果

<!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>
<title>一个Banner广告收缩效果 </title>
<style type=”text/css”>
*{margin:0; padding:0;}/*为了方便 直接这样重置了*/
#main{margin:0 auto; width:960px;}
#banner{display:none; margin:0 auto; width:960px; height:160px; background:url(http://www.pigzz.com/images/1.gif) no-repeat; position:relative;}
……………..

<!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> 
  <title>一个Banner广告收缩效果 </title> 
  <style type="text/css">
     *{margin:0; padding:0;}/*为了方便 直接这样重置了*/
     #main{margin:0 auto; width:960px;}
     #banner{display:none; margin:0 auto; width:960px; height:160px;
background:url(http://www.pigzz.com/images/1.gif) no-repeat; position:relative;}
     #close{display:block; width:50px; height:22px; text-align:center;
line-height:22px; border:1px #ddd solid; background:#000; color:#fff;
 font-size:12px; float:right; cursor:pointer;}
     </style> 
  <script type="text/javascript" src="http://
www.codefans.net/ajaxjs/jquery1.3.2.js"></script> 
  <script type="text/javascript">
     $
     (
     function()
     {
     $("#banner").slideDown();
     var Up=function(){$("#banner").slideUp(1500)}
     setTimeout(Up,3000);
     $("#close").click
     (
     function()
     {
     $("#banner").slideToggle
     (
     600,function()
     {
     if($("#banner").css("display") == "none")
     {
     $("#close").text("打开");
     }
     else
     {
     $("#close").text("关闭");
     }
     }
     );
     }
     );
     }
     );
     </script> 
 </head> 
 <body> 
  <div id="main"> 
   <div id="banner"></div> 
   <span id="close">关闭</span> 
  </div>  
 </body>
</html>

Leave a Comment

 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |