帶緩沖的 收縮與展開內(nèi)容效果
更新時(shí)間：2007年09月28日 20:07:27 作者：
兼容ie5.5+ firefox2.0(因?yàn)槲抑挥羞@兩個(gè)瀏覽器,所以只在它們中做了測(cè)試)
看到blueidea很多朋友都發(fā)了一些 收縮與展開內(nèi)容的效果,唯一差的就是一個(gè)緩沖效果.不多說,運(yùn)行一下就知道了,呵呵.
最大高度還需要固定數(shù)值.沒有很好的解決方案.有興趣的朋友幫忙解決一下拉,謝謝.
這個(gè)代碼其他部分不會(huì)再發(fā)出更新和完善之后的了.如果需要封裝就自己做做吧,呵呵.
放出代碼為分享學(xué)習(xí)之用.請(qǐng)尊重別人的作品勿作商業(yè)用途!!!!!
<html>
<head>
<script>
/*
By Auntion
QQ 82874972
歡迎喜歡javascript 和 ajax的朋友++我QQ,大家共同進(jìn)步,呵呵
使用方法
調(diào)用效果: Effect(1,2);
其中1為: 被改變對(duì)象的id
其中2為: 控制容器的id 可在使用: this.parentNode.id 取得(父標(biāo)簽的id)
注意給對(duì)象ID的時(shí)候一定不要重復(fù).
*/
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+"');>關(guān)閉</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; //獲取對(duì)象高度
var MinHeight = 5; //定義對(duì)象最小高度
var MaxHeight = 130; //定義對(duì)象最大高度
var BoxAddMax = 1; //遞增量初始值
var Every_Add = 0.15; //每次的遞(減)增量 [數(shù)值越大速度越快]
var Reduce = (BoxAddMax - Every_Add);
var Add = (BoxAddMax + Every_Add);
if (method == "Close"){
var Alter_Close = function(){ //構(gòu)建一個(gè)虛擬的[遞減]循環(huán)
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(){ //構(gòu)建一個(gè)虛擬的[遞增]循環(huán)
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);">關(guān)閉</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);">關(guān)閉</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>
兩個(gè)都關(guān)閉的狀態(tài)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
一個(gè)打開一個(gè)關(guān)閉的狀態(tài)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
美化下的
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
看到blueidea很多朋友都發(fā)了一些 收縮與展開內(nèi)容的效果,唯一差的就是一個(gè)緩沖效果.不多說,運(yùn)行一下就知道了,呵呵.
最大高度還需要固定數(shù)值.沒有很好的解決方案.有興趣的朋友幫忙解決一下拉,謝謝.
這個(gè)代碼其他部分不會(huì)再發(fā)出更新和完善之后的了.如果需要封裝就自己做做吧,呵呵.
放出代碼為分享學(xué)習(xí)之用.請(qǐng)尊重別人的作品勿作商業(yè)用途!!!!!
復(fù)制代碼 代碼如下:
<html>
<head>
<script>
/*
By Auntion
QQ 82874972
歡迎喜歡javascript 和 ajax的朋友++我QQ,大家共同進(jìn)步,呵呵
使用方法
調(diào)用效果: Effect(1,2);
其中1為: 被改變對(duì)象的id
其中2為: 控制容器的id 可在使用: this.parentNode.id 取得(父標(biāo)簽的id)
注意給對(duì)象ID的時(shí)候一定不要重復(fù).
*/
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+"');>關(guān)閉</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; //獲取對(duì)象高度
var MinHeight = 5; //定義對(duì)象最小高度
var MaxHeight = 130; //定義對(duì)象最大高度
var BoxAddMax = 1; //遞增量初始值
var Every_Add = 0.15; //每次的遞(減)增量 [數(shù)值越大速度越快]
var Reduce = (BoxAddMax - Every_Add);
var Add = (BoxAddMax + Every_Add);
if (method == "Close"){
var Alter_Close = function(){ //構(gòu)建一個(gè)虛擬的[遞減]循環(huán)
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(){ //構(gòu)建一個(gè)虛擬的[遞增]循環(huán)
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);">關(guān)閉</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);">關(guān)閉</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>
兩個(gè)都關(guān)閉的狀態(tài)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
一個(gè)打開一個(gè)關(guān)閉的狀態(tài)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
美化下的
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
javascript仿qq界面的折疊菜單實(shí)現(xiàn)代碼
最近一直在研究網(wǎng)頁(yè)特效,看到qq界面的折疊菜單,于是冒出個(gè)想法,自己寫一個(gè)類似的,需要的朋友可以參下2012-12-12
用js實(shí)現(xiàn)的點(diǎn)擊顯示與隱藏層的代碼。主要是用于一些tab切換類2009-06-06
2008-05-05
JavaScript 下拉菜單實(shí)現(xiàn)代碼
利用css+js實(shí)現(xiàn)的下拉菜單。通過getElementsByTagName獲取ul,隱藏顯示。2009-05-05
網(wǎng)上的太復(fù)雜，這樣的代碼比較簡(jiǎn)單2008-12-12
javascript 垂直彈性菜單2008-12-12
實(shí)用的多級(jí)樹形展開菜單，相信它支持的級(jí)別會(huì)讓您滿意，開始我還以為它是無限級(jí)的呢？希望這個(gè)菜單對(duì)大家有幫助哦。2010-10-10
javascript采用數(shù)組實(shí)現(xiàn)tab菜單切換效果
最近寫了一個(gè)tab菜單,這個(gè)也算是web2.0的產(chǎn)物了,沒什么技術(shù)含量,練練手而已.需要的朋友可以參考下2012-12-12
js iframe網(wǎng)站后臺(tái)左右收縮型頁(yè)面腳本
其實(shí)和我的后臺(tái)一樣網(wǎng)站后臺(tái)免費(fèi)提供 這里的樣式的重點(diǎn)是指當(dāng)鼠標(biāo)移到三角按鈕時(shí)變成手掌2008-07-07
無限級(jí)導(dǎo)航菜單，這個(gè)是可以任意加載子菜單，原理比較不錯(cuò)，推薦大家學(xué)習(xí)2008-09-09