Maison > interface Web > js tutoriel > 带缓冲的 收缩与展开内容效果_导航菜单

带缓冲的 收缩与展开内容效果_导航菜单

WBOY
Libérer: 2016-05-16 19:08:42
original
995 Les gens l'ont consulté

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

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

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

复制代码 代码如下:



<script> <BR>/* <BR>By Auntion <BR>QQ 82874972 <BR>欢迎喜欢javascript 和 ajax的朋友++我QQ,大家共同进步,呵呵 <BR>使用方法 <BR>调用效果: Effect(1,2); <BR> 其中1为: 被改变对象的id <BR> 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) <BR>注意给对象ID的时候一定不要重复. <BR>*/ <BR>function $G(Read_Id) { return document.getElementById(Read_Id) } <BR>function Effect(ObjectId,parentId){ <BR> if ($G(ObjectId).style.display == 'none'){ <BR> Start(ObjectId,'Opens'); <BR> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭" <BR> }else{ <BR> Start(ObjectId,'Close'); <BR> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" <BR> } <BR>} <BR>function Start(ObjId,method){ <BR>var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 <BR>var MinHeight = 5; //定义对象最小高度 <BR>var MaxHeight = 130; //定义对象最大高度 <BR>var BoxAddMax = 1; //递增量初始值 <BR>var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] <BR>var Reduce = (BoxAddMax - Every_Add); <BR>var Add = (BoxAddMax + Every_Add); <BR>if (method == "Close"){ <BR>var Alter_Close = function(){ //构建一个虚拟的[递减]循环 <BR> BoxAddMax /= Reduce; <BR> BoxHeight -= BoxAddMax; <BR> if (BoxHeight <= MinHeight){ <BR> $G(ObjId).style.display = "none"; <BR> window.clearInterval(BoxAction); <BR> } <BR> else $G(ObjId).style.height = BoxHeight; <BR>} <BR>var BoxAction = window.setInterval(Alter_Close,1); <BR>} <BR>else if (method == "Opens"){ <BR>var Alter_Opens = function(){ //构建一个虚拟的[递增]循环 <BR> BoxAddMax *= Add; <BR> BoxHeight += BoxAddMax; <BR> if (BoxHeight >= MaxHeight){ <BR> $G(ObjId).style.height = MaxHeight; <BR> window.clearInterval(BoxAction); <BR> }else{ <BR> $G(ObjId).style.display= "block"; <BR> $G(ObjId).style.height = BoxHeight; <BR> } <BR>} <BR>var BoxAction = window.setInterval(Alter_Opens,1); <BR>} <BR>} <BR></script>




  
    
      
    
  
关闭



  
    
      
    
  


        里

        是

        第

        二

        ,

        很

        正

        常



  
    
      
    
  





  
    
      
    
  
关闭



  
    
      
    
  


        里

        是

        第

        一

        ,

        很

        正

        常



  
    
      
    
  





两个都关闭的状态

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

一个打开一个关闭的状态

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

美化下的

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal