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

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

Javascript: innerHTML和innerText的用法; 单击按钮复制定义好的内容到剪贴板; 浏览器兼容性:停止事件冒泡和阻止浏览器的默认行为; javascript初学者:全面学习对象概念; 10款图片展示Javascript代码; 解决ajax跨域问题的实例; rails制作rss feed; javascript变量作用域在不同浏览器的处理; 网页整理的JS技巧代码; js操作iframe的src的例子; Javascript利用循环绑定事件的例子; Javascript网页恶意代码; javascript恶意代码修改主页修复; JavaScript折叠式列表的网页制作; 初学Javascript的总结; JavaScript编程实践中容易出错的地方; JavaScript容易犯错的九个陷阱; 复制文章自动附加版权信息; MooTools教程(1):认识MooTools; MooTools教程(2):DOM选择器

No. « ‹ 165 166 167 168 › »

技术文章搜索

关键字

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

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

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