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

兼容ie5.5+   firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试)

看到blueidea很多朋友都发了一些收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵.
最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢.
这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵.

放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!!
复制代码代码如下:

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;
}



      关闭





      这

        里

        是

        第

        二

        ,

        很

        正

        常






      ▲





      关闭





      这

        里

        是

        第

        一

        ,

        很

        正

        常






      ▲



两个都关闭的状态

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
一个打开一个关闭的状态

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
美化下的

<html> <head> <sty1e> 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> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" align="center" bgcolor="#2DD5FF" id="testtab">闭月羞花</td> </tr> </table> <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> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" align="center" valign="bottom" bgcolor="#00C0F0">▲</td> </tr> </table> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab">闭月羞花</td> </tr> </table> <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> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" align="center" valign="bottom" bgcolor="#00C0F0">▲</td> </tr> </table> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

JavaScript相关栏目本月热门文章

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