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

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

Javascript: JQuery的ajax基础上的超强GridView展示; js表格分页实现代码; 下载站控制介绍字数显示的脚本显示全部隐藏介绍等功能; Tab页界面，用jQuery及Ajax技术实现; 用jQuery技术实现Tab页界面之二; 通过JS 获取Mouse Position(鼠标坐标)的代码; javascript 必知必会之closure; jquery ajax 登录验证实现代码; jQuery 使用手册(一); jQuery 使用手册(二); jQuery 使用手册(三); jQuery 使用手册(五); 用Javascript 获取页面元素的位置的代码; 网页自动跳转代码收集; JS 连锁泡泡 v1.1; javascript的onchange事件与jQuery的change()方法比较; jquery 模式对话框终极版实现代码; javascript 页面划词搜索JS; javascript String split方法误操作; 一个JS小玩意几个属性相加不能超过一个特定值.

No. « ‹ 227 228 229 230 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 中的带缓冲的收缩与展开内容效果