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

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

兼容浏览器
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>

需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在FF也可应用,代码如下:

<script type="text/javascript">
//Url: http://bbs.51js.com/thread-61646-1-1.html
//Author: 风云突变
//Modify: 枫岩
var act;
function over(s,nMax){
  var obj=document.getElementById(s);
  var h = parseInt(obj.offsetHeight);
  if (h < nMax){
    obj.style.height = (h + 2)+"px";
    clearTimeout(act);
    act = setTimeout("over('"+s+"',"+nMax+")", 10);
  }
}
function out(s,nMin){
  var obj=document.getElementById(s);
  var h = parseInt(obj.offsetHeight);
  if (h > nMin){
    obj.style.height = (h - 2)+"px";
    clearTimeout(act);
    act = setTimeout("out('"+s+"',"+nMin+")", 10);
  }
}
</script>
<div id="mytd" onmouseover="over('mytd',200);" onmouseout="out('mytd',30);" style="background:#eee;">代码实例:层的滑动展开/折叠</div>


无忧网友 fangxiao9159 再次优化后:


<script type="text/javascript">
var intervalId = null;
function move(id,state){
  var obj = document.getElementById(id);
  if(intervalId != null)
    window.clearInterval(intervalId);
  function change(){
   var h = parseInt(obj.offsetHeight);
   obj.style.height = (state == "down") ? (h + 2) : (h - 2);
  }
  intervalId = window.setInterval(change,10);
}
</script>
<table border="1" cellpadding="0" cellspacing="0" id="mytd" onmouseover="move('mytd','down');" onmouseout="move('mytd','out');">
<tr><td>无忧脚本 - 风云突变</td></tr></table>



来源:http://www.cnlei.org/blog/article.asp?id=324

AddThis Social Bookmark Button

相关文档(Relevant Entries)
javascript常用日期验证
免费的Javascript日期输入及选择控件大杂烩!
JavaScript常用检测脚本
JS正则表达式的用法
JAVASCRIPT的常用技术(三)
JAVASCRIPT的常用技术(二)
JAVASCRIPT的常用技术(一)
自适应图片大小的窗口
Posted on November 23, 2006 7:13 PM | | | | TrackBacks (0)

引用地址(TRACKBACKS)
 
TrackBack URL for this entry:
http://www.wujianrong.com/mt-tb.cgi/4157

发布评论(ADD YOUR COMMENTS)
 
感谢您参与评论;发表您的意见时请保持文章的相关性;不相关的或是单纯宣传的内容可能会被删掉。您的E-mail只是用来确认您发表的文章,不会出现在网页上。
Please keep your comments relevant to this blog entry. Email addresses are never displayed, but they are required to confirm your comments.

称呼(Name):      记住我的个人信息(Remember)
邮箱(Email):
网址(URL):
评论(Add your comments):

相关内容