滑动展开/收缩广告代码实例效果
2016-01-29 11:29
滑动展开/收缩广告代码实例效果,滑动展开/收缩广告代码实例效果
滑动展开/收缩广告效果,可指定：广告完全展开时的停留时间，最大高度
兼容浏览器：
IE5.0+、FF1.06+、Opera8.0+
实例代码：
<!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" lang="gb2312"
<head
<title 代码实例：滑动展开/收缩广告 </title
<meta http-equiv="content-type" content="text/html; charset=gb2312" /
<meta name="author" content="枫岩,CNLei.y.l@gmail.com"
<meta name="keywords" content="代码实例：滑动展开/收缩广告" /
<script type="text/javascript"
var intervalId = null;
function slideAd(id,nStayTime,sState,nMaxHth,nMinHth){
this.stayTime=nStayTime*1000 || 3000;
this.maxHeigth=nMaxHth || 90;
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.offsetHeightthis.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="margin:0;padding:0;font-size:14px;"
<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
<li这里是广告内内容</li
<li这里是广告内内容</li
<li这里是广告内内容</li
<li这里是广告内内容</li [next]
<li这里是广告内内容</li
<li这里是广告内内容</li
<li这里是广告内内容</li
<li这里是广告内内容</li
</ul
</div
<p代码实例：<strong滑动展开/收缩广告</strong 请刷新页面，再次观看演示效果</p
<script type="text/javascript"
<!--
slideAd(’MyMoveAd’,2);
--
</script
</body
</html
