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

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

Javascript: 用jQuery解决IE不支持的option disable属性; jQuery 源代码显示控件 (Ajax加载方式).; JS backgroundImage控制; jQuery 性能优化指南（1）; jQuery 性能优化指南（2）; jQuery 性能优化指南（3）; input+select(multiple) 实现下拉框输入值; javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]; jQuery 图像裁剪插件Jcrop的简单使用; 让GoogleCode的SVN下的HTML文件在FireFox下正常显示.; jquery(1.3.2) 斑马线效果代码; JQuery Jcrop 实现图片裁剪的插件; jquery img src 获取实现代码; javascript 历史记录经常用于产品最近历史浏览; jquery tabs的实现代码; jQuery 剧场版你必须知道的javascript; JavaScript 闭包深入理解(closure); js 图片缩放（按比例）控制代码; 广告切换效果(缓动切换); javascript 用局部变量来代替全局变量

No. « ‹ 219 220 221 222 › »

技术文章搜索

关键字

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

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

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