一个Banner广告收缩效果

2024-09-05 12:22:42

字体：大中小

来源：转载

供稿：网友

一个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.codefans.net/jscss/demoimg/201107/banner.png) 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>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1558318.html'>浮动在网页右下角的彩票开奖公告窗口</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1558320.html'>拉幕的广告代码</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流