带缓冲的 收缩与展开内容效果

时间：2021-05-18

兼容ie5.5+firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试)

看到blueidea很多朋友都发了一些收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵.
最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢.
这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵.

放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!!
复制代码 代码如下:
<html>
<head>
<script>

function$G(Read_Id){returndocument.getElementById(Read_Id)}
functionEffect(ObjectId,parentId){
if($G(ObjectId).style.display=='none'){
Start(ObjectId,'Opens');
$G(parentId).innerHTML="<ahref=#onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭</a>"
}else{
Start(ObjectId,'Close');
$G(parentId).innerHTML="<ahref=#onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开</a>"
}
}
functionStart(ObjId,method){
varBoxHeight=$G(ObjId).offsetHeight;//获取对象高度
varMinHeight=5;//定义对象最小高度
varMaxHeight=130;//定义对象最大高度
varBoxAddMax=1;//递增量初始值
varEvery_Add=0.15;//每次的递(减)增量[数值越大速度越快]
varReduce=(BoxAddMax-Every_Add);
varAdd=(BoxAddMax+Every_Add);
if(method=="Close"){
varAlter_Close=function(){//构建一个虚拟的[递减]循环
BoxAddMax/=Reduce;
BoxHeight-=BoxAddMax;
if(BoxHeight<=MinHeight){
$G(ObjId).style.display="none";
window.clearInterval(BoxAction);
}
else$G(ObjId).style.height=BoxHeight;
}
varBoxAction=window.setInterval(Alter_Close,1);
}
elseif(method=="Opens"){
varAlter_Opens=function(){//构建一个虚拟的[递增]循环
BoxAddMax*=Add;
BoxHeight+=BoxAddMax;
if(BoxHeight>=MaxHeight){
$G(ObjId).style.height=MaxHeight;
window.clearInterval(BoxAction);
}else{
$G(ObjId).style.display="block";
$G(ObjId).style.height=BoxHeight;
}
}
varBoxAction=window.setInterval(Alter_Opens,1);
}
}
</script>
<style>
body,div,table{font-size:12px;}
#control{width:200;background-color:#ccc;font-size:12px;font-color:#333333;text-align:center;}
#controla{font-weight:900;line-height:30px;color:#333333;}
.test{height:130;width:200;background-color:#ccc;display:block;overflow:hidden;}
.STYLE1{
font-size:8px;
color:#FFFFFF;
}
</style>
</head>
<body>
<divid="control">
<tablewidth="100%"height="30"border="0"cellpadding="0"cellspacing="0">
<tr>
<tdwidth="100%"align="center"bgcolor="#2DD5FF"id="testtab"><ahref="#"onClick="Effect('test',this.parentNode.id);">关闭</a></td>
</tr>
</table>
</div>
<divid="test"class="test">
<tablewidth="100%"height="130"border="0"cellpadding="4"cellspacing="0"bgcolor="#EEEEEE">
<tr>
<tdcolspan="3"align="center"valign="top">这<br>
里<br>
是<br>
第<br>
二<br>
,<br>
很<br>
正<br>
常<br></td>
</tr>
</table>
</div>
<divid="control">
<tablewidth="100%"height="10"border="0"cellpadding="0"cellspacing="0">
<tr>
<tdwidth="100%"align="center"valign="bottom"bgcolor="#00C0F0"><spanclass="STYLE1">▲</span></td>
</tr>
</table>
</div>
<br>
<divid="control">
<tablewidth="100%"height="30"border="0"cellpadding="0"cellspacing="0">
<tr>
<tdwidth="100%"align="center"bgcolor="#2DD5FF"id="test1tab"><ahref="#"onClick="Effect('test1',this.parentNode.id);">关闭</a></td>
</tr>
</table>
</div>
<divid="test1"class="test">
<tablewidth="100%"height="130"border="0"cellpadding="4"cellspacing="0"bgcolor="#EEEEEE">
<tr>
<tdcolspan="3"align="center"valign="top">这<br>
里<br>
是<br>
第<br>
一<br>
,<br>
很<br>
正<br>
常<br></td>
</tr>
</table>
</div>
<divid="control">
<tablewidth="100%"height="10"border="0"cellpadding="0"cellspacing="0">
<tr>
<tdwidth="100%"align="center"valign="bottom"bgcolor="#00C0F0"><spanclass="STYLE1">▲</span></td>
</tr>
</table>
</div>
</body>
</html>

两个都关闭的状态
body,div,table { font-size:12px;} #control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; } #control a { font-weight:900; line-height:30px; color:#333333; } .test{ height:130;width:200;background-color:#ccc;display:block;overflow:hidden; } .STYLE1 { font-size: 8px; color: #FFFFFF; } 关闭 这 里 是 第 二 , 很 正 常 ▲ 关闭 这 里 是 第 一 , 很 正 常 ▲ [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
一个打开一个关闭的状态
body,div,table { font-size:12px;} #control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; } #control a { font-weight:900; line-height:30px; color:#333333; } .test{ height:130;width:200;background-color:#ccc;overflow:hidden; } .STYLE1 { font-size: 8px; color: #FFFFFF; } 关闭 这 里 是 第 二 , 很 正 常 ▲ 打开 这 里 是 第 一 , 很 正 常 ▲ [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
美化下的
body,div,table { font-size:12px;} #control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; } #control a { font-weight:900; line-height:30px; color:#333333; } .test{ height:130;width:200;background-color:#ccc;display:block;overflow:hidden; } .STYLE1 { font-size: 8px; color: #FFFFFF; } 闭月羞花 变焦基 本靠走， 对焦基本 靠扭，遮 光基本靠 手，虚化 基本靠抖 ，测光基 本靠瞅， 防抖基本 靠肘。 ▲ 闭月羞花 春天,我把老婆埋在地底下,秋天,我就有好多老婆...... ▲ [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章