带缓冲的 收缩与展开内容效果
2018-10-15 18:03
兼容ie5.5+firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试)
看到blueidea很多朋友都发了一些收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵.
最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢.
这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵.
放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!!
复制代码 代码如下:
<html>
<head>
<script>
/*
ByAuntion
QQ82874972
欢迎喜欢javascript和ajax的朋友++我QQ,大家共同进步,呵呵
使用方法
调用效果:Effect(1,2);
其中1为:被改变对象的id
其中2为:控制容器的id可在使用:this.parentNode.id取得(父标签的id)
注意给对象ID的时候一定不要重复.
*/
function$G(Read_Id){returndocument.getElementById(Read_Id)}
functionEffect(ObjectId,parentId){
if($G(ObjectId).style.display==none){
Start(ObjectId,Opens);
}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=30border=0cellpadding=0cellspacing=0>
<tr>
<tdwidth=100%align=centerbgcolor=#2DD5FFid=testtab><ahref=#onClick=Effect(test,this.parentNode.id);>关闭</a></td>
</tr>
</table>
</div>
<divid=testclass=test>
<tablewidth=100%height=130border=0cellpadding=4cellspacing=0bgcolor=#EEEEEE>
<tr>
<tdcolspan=3align=centervalign=top>这<br>
里<br>
是<br>
第<br>
二<br>
,<br>
很<br>
正<br>
常<br></td>
</tr>
</table>
</div>
<divid=control>
<tablewidth=100%height=10border=0cellpadding=0cellspacing=0>
<tr>
<tdwidth=100%align=centervalign=bottombgcolor=#00C0F0><spanclass=STYLE1>▲</span></td>
</tr>
</table>
</div>
<br>
<divid=control>
<tablewidth=100%height=30border=0cellpadding=0cellspacing=0>
<tr>
<tdwidth=100%align=centerbgcolor=#2DD5FFid=test1tab><ahref=#onClick=Effect(test1,this.parentNode.id);>关闭</a></td>
</tr>
</table>
</div>
<divid=test1class=test>
<tablewidth=100%height=130border=0cellpadding=4cellspacing=0bgcolor=#EEEEEE>
<tr>
<tdcolspan=3align=centervalign=top>这<br>
里<br>
是<br>
第<br>
一<br>
,<br>
很<br>
正<br>
常<br></td>
</tr>
</table>
</div>
<divid=control>
<tablewidth=100%height=10border=0cellpadding=0cellspacing=0>
<tr>
<tdwidth=100%align=centervalign=bottombgcolor=#00C0F0><spanclass=STYLE1>▲</span></td>
</tr>
</table>
</div>
</body>
</html>
两个都关闭的状态
关闭 这 里 是 第 二 , 很 正 常 ▲ 关闭 这 里 是 第 一 , 很 正 常 ▲
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
一个打开一个关闭的状态
关闭 这 里 是 第 二 , 很 正 常 ▲ 打开 这 里 是 第 一 , 很 正 常 ▲
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
美化下的
闭月羞花 变焦基 本靠走， 对焦基本 靠扭，遮 光基本靠 手，虚化 基本靠抖 ，测光基 本靠瞅， 防抖基本 靠肘。 ▲ 闭月羞花 春天,我把老婆埋在地底下,秋天,我就有好多老婆...... ▲
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]