首页  »  网页设计教程  »  滑动展开/收缩广告源码实例效果

滑动展开/收缩广告源码实例效果

浏览数:共 3113 次     评论:共 0 条     发布日期:2012-04-12     分类:javascript

功能说明:
滑动展开/收缩广告效果,可指定:广告完全展开时的停留时间,最大高度

兼容浏览器:
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.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="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>
<li>这里是广告内内容</li>
<li>这里是广告内内容</


li>
<li>这里是广告内内容</li>
<li>这里是广告内内容</li>
</ul>
</div>
<p>代码实例:<strong>滑动展开/收缩广告</strong>&;nbsp;&;nbsp;&;nbsp;请刷新页面,再次观看演示效果</p>
<script type="text/javascript">
<!--
slidead(’mymovead’,2);
-->
</script>
</body>
</html



上一篇:Js 按照MVC模式制作自定义控件
下一篇:JS实现的滑动展开和折叠效果