<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> 滑动展开/收缩广告 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var intervalId = null;
function slideAd(id,nStayTime,sState,nMaxHth,nMinHth){
this.stayTime=nStayTime*1000 || 3000;
this.maxHeigth=nMaxHth || 150;
this.minHeigth=nMinHth || 1;
this.state=sState || "down" ;
var obj = document.getElementById(id);
if(intervalId != null)window.clearInterval(intervalId);
function openBox(){
var h = obj.offsetHeight;
obj.style.height = ((this.state == "down") ? (h + 2) : (h - 2))+"px";
if(obj.offsetHeight>this.maxHeigth){
window.clearInterval(intervalId);
intervalId=window.setInterval(closeBox,this.stayTime);
}
if (obj.offsetHeight<this.minHeigth){
window.clearInterval(intervalId);
obj.style.display="none";
}
}
function closeBox(){
slideAd(id,this.stayTime,"up",nMaxHth,nMinHth);
}
intervalId = window.setInterval(openBox,10);
}
</script>
</head>
<body style="font-size:14px;margin:0;padding:0">
<div id="MyMoveAd" style="background:#ff0;height:12px;overflow:hidden;">
<ul>
<li>这里是广告内内容</li>
<li>这里是广告内内容</li>
<li>你在这里可以放置任何东西</li>
<li>这里是广告内内容</li>
<li>这里是广告内内容</li>
<li>这里是广告内内容</li>
<li>这里是广告内内容</li>
</ul>
</div>
<p>代码实例:<strong>滑动展开/收缩广告</strong> 请刷新页面,再次观看演示效果</p>
<script type="text/javascript">
<!--
slideAd('MyMoveAd',5);
-->
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>像163网站顶部展出的大幅广告-wsoul.net</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var time = 500;
var h = 0;
function addCount()
{
if(time>0)
{
time--;
h = h+5;
}
else
{
return;
}
if(h>500) //高度
{
return;
}
document.getElementById("ads").style.display = "";
document.getElementById("ads").style.height = h+"px";
setTimeout("addCount()",30);
}
window.onload = function showAds()
{
addCount();
setTimeout("noneAds()",7000); //停留时间自己适当调整
}
</script>
<script type="text/javascript" language="javascript">
var T = 500;
var N = 500; //高度
function noneAds()
{
if(T>0)
{
T--;
N = N-5;
}
else
{
return;
}
if(N<0)
{
document.getElementById("ads").style.display = "none";
return;
}
document.getElementById("ads").style.height = N+"px";
setTimeout("noneAds()",30);
}
</script>
<form id="form1" runat="server">
<div id="ads" style="margin:auto; display:none; width:900px; top:0px; height:0px; border:solid 1px #000; background-color:#fafafa; overflow:hidden; text-align:center;">
<img src="http://gg.blueidea.com/desk/2007/004.jpg" width="900" height="500" alt="" />
</div>
<div style="margin:auto; width:900px; height:200px; border:solid 1px #000; background-color:#fafafa; text-align:center;">
网站主体内容
</div>
</form>
</body>
</html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
</style> </head>
<body onload="">
<div id="pic" style="height: 200px; width:800px; border: solid red 1px;overflow: hidden">
here is a advertisement!
</div>
<div style="height: 200px; width:800px; border: solid red 1px;overflow: hidden">here is the page body.</div>
</body>
<script>
var intervalId = null;//定时器function slideAd(id,nStayTime,sState,nMaxHth,nMinHth)
{
this.stayTime=nStayTime*500 || 100;//如果参数中有nStayTime,则stayTime = (stayTime乘以500), 否则取值为stayTime=100。
this.maxHeigth=nMaxHth || 490;//整个广告的最大高度
this.minHeigth=nMinHth || 1;//;//整个广告的最xiao高度
this.state=sState || "down" ;//方向
var obj = document.getElementById(id);//展示广告的容器,我用的是上面的div (id=pic),
if(intervalId != null)window.clearInterval(intervalId);//如果正在运行,则中指定时器
function openBox()
{
var h = obj.offsetHeight;//容器的高度
obj.style.height = ((this.state == "down") ? (h + 10) : (h - 10));//如果方向朝下,则每次高度+10,否则-10
if(obj.offsetHeight>this.maxHeigth)//如果大于最大高度了,则开始变小
{
window.clearInterval(intervalId);
intervalId=window.setInterval(closeBox,this.stayTime);
}
if (obj.offsetHeight<this.minHeigth)
{
window.clearInterval(intervalId);
obj.style.display="none";
}
}
function closeBox()//
{
slideAd(id,this.stayTime,"up",nMaxHth,nMinHth);
}
intervalId = window.setInterval(openBox,10);
}
slideAd('pic');//开始调用
// slideAd('pic', 2,'down',500, 100);//也可以这样调用
</script>
</html>
还有这个贴子,有人问同样的问题:
http://topic.csdn.net/u/20090428/12/bdff5785-3a6b-48dc-be90-2670f2fc5e50.html