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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 带缓冲的收缩与展开内容效果

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 73 ::

收藏到网摘: n/a

用meta实现的页面跳转代码删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。

兼容ie5.5+ firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试)
看到blueidea很多朋友都发了一些收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵.
最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢.
这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵.
放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!!

复制代码代码如下:

<html> 
<head> 
<script> 
/* 
By Auntion 
QQ 82874972 
欢迎喜欢javascript 和 ajax的朋友++我QQ,大家共同进步,呵呵 
使用方法 
调用效果: 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> 
<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);">关闭</a></td> 
 </tr> 
 </table> 
</div> 
<div id="test" class="test"> 
 <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> 
 <tr> 
 <td colspan="3" align="center" valign="top">这<br> 
 里<br> 
 是<br> 
 第<br> 
 二<br> 
 ,<br> 
 很<br> 
 正<br> 
 常<br></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"><span class="STYLE1">▲</span></td> 
 </tr> 
 </table> 
</div> 
<br> 
<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);">关闭</a></td> 
 </tr> 
 </table> 
</div> 
<div id="test1" class="test"> 
 <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> 
 <tr> 
 <td colspan="3" align="center" valign="top">这<br> 
 里<br> 
 是<br> 
 第<br> 
 一<br> 
 ,<br> 
 很<br> 
 正<br> 
 常<br></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"><span class="STYLE1">▲</span></td> 
 </tr> 
 </table> 
</div> 
</body> 
</html>

两个都关闭的状态

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

一个打开一个关闭的状态

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

美化下的

点击运行可以看到效果:

<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">
春天,我把老婆埋在地底下,秋天,我就有好多老婆......
</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 全选提示:你可先修改部分代码,再按运行]

用meta实现的页面跳转代码删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。

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

评论 (0) All

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