网页特效:滑动展开与折叠效果

2008-02-23 08:05:55来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:服务器响应HTTP的类型ContentType大全

下一篇:滑动展开/收缩广告代码实例效果