slideAd(id,nStayTime,sState,nMaxHth,nMinHth)自动收缩

原创于 2010-03-15 10:23:00 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#border #function #generator #xhtml #null

本文介绍了一个简单的滑门效果实现方式，通过HTML和JavaScript代码展示了如何让一个广告条自动展开和收起，为网页增添了动态元素。

<!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 name="Generator" content="NO" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>滑门</title>
</head>
<body>
<center>
<script type="text/javascript">
var intervalId = null;
function slideAd(id,nStayTime,sState,nMaxHth,nMinHth){
this.stayTime=nStayTime*1000 || 3000;
this.maxHeigth=nMaxHth || 330;
this.minHeigth=nMinHth || 2.5;
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,30);
}
</script>
<div id="MyMoveAd" style="background:#ff0000;height:12px;overflow:hidden;">
<a href="http://www.shizu.cn:81/affiche.php?ad_id=6&from=&uri=http%3A%2F%2Fwww.shizu.cn%2Factivity.php" target="_blank"><img src="http://www.shizu.cn:81/data/afficheimg/1229285941980341676.gif" border="0" /></a>
</div>

<script type="text/javascript">

</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="jueban" style="background:red;display: ">
<tr><td height=""><a href="http://bbs.blueidea.com" target="_blank">
<img src="http://www.shizu.cn/data/afficheimg/2009x990x30.gif" border="0"></a></td></tr></table>
</center>
</body>
</html>