带缓冲的收缩与展开内容效果_导航菜单

2020年8月23日 00:18:59js教程评论504 views阅读模式

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

看到blueidea很多朋友都发了一些收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵.

最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢.

这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵.

放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!!

复制代码代码如下:

关闭

这

里

是

第

二

很

正

常

▲

关闭

这

里

是

第

一

很

正

常

▲

两个都关闭的状态

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一个打开一个关闭的状态

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

美化下的

<html> 
<head> 
<script> 
/* 
By Auntion 
QQ 82874972 
使用方法 
调用效果: Effect(1,2); 
 其中1为: 被改变对象的id 
 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 
注意给对象ID的时候一定不要重复. 
*/ 
function $G(Read_Id) { return document.getElementById(Read_Id) } 
function Effect(ObjectId,parentId){ 
 if ($G(ObjectId).style.display == 'none'){ 
 Start(ObjectId,'Opens'); 
 $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>闭月羞花</a>" 
 }else{ 
 Start(ObjectId,'Close'); 
 $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>芝麻开门</a>" 
 } 
} 
function Start(ObjId,method){ 
var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 
var MinHeight = 5; //定义对象最小高度 
var MaxHeight = 130; //定义对象最大高度 
var BoxAddMax = 1; //递增量初始值 
var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] 
var Reduce = (BoxAddMax - Every_Add); 
var Add = (BoxAddMax + Every_Add); 
if (method == "Close"){ 
var Alter_Close = function(){ //构建一个虚拟的[递减]循环 
 BoxAddMax /= Reduce; 
 BoxHeight -= BoxAddMax; 
 if (BoxHeight <= MinHeight){ 
 $G(ObjId).style.display = "none"; 
 window.clearInterval(BoxAction); 
 } 
 else $G(ObjId).style.height = BoxHeight; 
} 
var BoxAction = window.setInterval(Alter_Close,1); 
} 
else if (method == "Opens"){ 
var Alter_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; 
 } 
} 
var BoxAction = 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; } 
#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; 
} 
</style> 
</head> 
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); 
"><center> 
<div id="control"> 
 <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> 
 <tr> 
 <td width="100%" align="center" bgcolor="#2DD5FF" id="testtab"><a href="#" onClick="Effect('test',this.parentNode.id);" 
onFocus="this.blur()">闭月羞花</a></td> 
 </tr> 
 </table> 
</div> 
<div id="test" class="test"> 
 <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE" 
style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); "> 
 <tr> 
 <td colspan="3" align="center" valign="top"> 
变焦基 
本靠走， 
对焦基本 
靠扭，遮 
光基本靠 
手，虚化 
基本靠抖 
，测光基 
本靠瞅， 
防抖基本 
靠肘。 
</td> 
 </tr> 
 </table> 
</div> 
<div id="control"> 
 <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> 
 <tr> 
 <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0">▲</td> 
 </tr> 
 </table> 
</div> 
<div id="control"> 
 <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> 
 <tr> 
 <td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab"><a href="#" onClick="Effect 
('test1',this.parentNode.id);" onFocus="this.blur()">闭月羞花</a></td> 
 </tr> 
 </table> 
</div> 
<div id="test1" class="test"> 
 <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE" 
style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); "> 
 <tr> 
 <td colspan="3" align="center" valign="top"> 
春天<Font 
Color="#4900FF">,我把老<Font 
Color="#00C0DB">婆埋在地<Font 
Color="#91C000">底下,秋<Font 
Color="#FF0000">天,我就<Font 
Color="#92C000">有好多老<Font 
Color="#00C0DA">婆...<Font 
Color="#4800FF">... 
</td> 
 </tr> 
 </table> 
</div> 
<div id="control"> 
 <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> 
 <tr> 
 <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0">▲</td> 
 </tr> 
 </table> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]