杰晶网络

带缓冲的 收缩与展开内容效果
网络编程 2024/11/14 佚名
3 2
兼容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 全选 注:引入外部Js需再刷新一下页面才能执行]
一个打开一个关闭的状态

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

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
标签：
带缓冲的,收缩与展开内容效果
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“带缓冲的 收缩与展开内容效果”
暂无“带缓冲的 收缩与展开内容效果”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网