Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Buffered shrink and expand content effects_navigation menu

Buffered shrink and expand content effects_navigation menu

WBOY
Release： 2016-05-16 19:08:42
Original
995 people have browsed it

Compatible with ie5.5 and firefox2.0 (because I only have these two browsers, I only tested them in them)

I saw that many friends from blueidea have posted some effects of shrinking and expanding content. The only difference is It is a buffering effect. Not much to say, you will know after running it, haha.
The maximum height also needs a fixed value. There is no good solution. Friends who are interested can help solve it, thank you.
This Other parts of the code will not be released after updates and improvements. If you need to encapsulate it, just do it yourself, haha.

The code is released for sharing and learning. Please respect other people's works and do not use them for commercial purposes!! !!!

Copy code The code is as follows:



<script> <br>/* <br>By Auntion <br>QQ 82874972 <br>Welcome friends who like javascript and ajax QQ, let’s make progress together, haha<br>Usage method<br>Call effect: Effect(1,2); <br> 1 is: the id of the object being changed <br> 2 is: the id of the control container. It can be found in Use: this.parentNode.id to get (the id of the parent tag) <br>Be careful not to repeat the object ID when giving it. <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 "');>Close</a>" <br> }else{ <br> Start (ObjectId,'Close'); <br> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('" ObjectId "','" parentId "');>Open< /a>" <br> } <br>} <br>function Start(ObjId,method){ <br>var BoxHeight = $G(ObjId).offsetHeight; //Define the minimum height of the object<br>var MaxHeight = 130;                                                                                                                          The maximum height of the object <br>var BoxAddMax = 1;                                                  🎜>var Every_Add = 0.15; ) Increment [The larger the value, the faster the speed] <br>var Reduce = (BoxAddMax - Every_Add); <br>var Add = (BoxAddMax Every_Add); <br>if (method == "Close"){ <br> var Alter_Close = function(){ //Construct a virtual [decreasing] loop <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(){ //Construct a virtual [increment] loop<BR> BoxAddMax *= Add; <BR> BoxHeight = BoxAddMax; <BR> if (BoxHeight >= MaxHeight){ <br> $G(ObjId).style.height = MaxHeight; <br> window.clear Interval(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>




  
    
      关闭
    
  


  
    
      这

        里

        是

        第

        二

        ,

        很

        正

        常

    
  


  
    
      ▲
    
  




  
    
      关闭
    
  


  
    
      这

        里

        是

        第

        一

        ,

        很

        正

        常

    
  


  
    
      ▲
    
  




Both are closed

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]

One is open and the other is closed.
▲
<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+"');>关闭" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" } } 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> <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){ var Obj_Display = $G(ObjectId).style.display; if (Obj_Display == 'none'){ Start(ObjectId,'Opens'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" } } 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>

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

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]
Related labels：
带缓冲的 收缩与展开内容效果
source：php.cn
Previous article：A piece of code to create a layer in javascript_javascript skills Next article：Summary and Analysis of 7 Methods for JavaScript Encryption and Decryption_Hacker Nature
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to trigger render (with filter and pagination) on sort method in React? Here is my Sort.js style component: <SortWrapper><SortText>SortBy</SortText...
From 2024-04-06 21:28:37
0
1
2257
The query and formula form the entire table, with new columns, where the new columns are formulas involving other conditional column values EDIT: The formula should be the "value" column - the "value" column wi...
From 2024-04-06 21:23:40
0
2
530
Can a workerpool declared in multiple routes still maintain its cpu usage without caring about the threshold I'm hoping to find a node.js system with a workerpool to handle CPU intensive tasks, but I...
From 2024-04-06 19:54:23
0
1
444
Why is my hr tag translucent when it is set to a solid color of white? I have a html (with bootstrap) and a css, in my html I have a <hr> tag which has a c...
From 2024-04-06 16:13:26
0
1
500
Open calculation documents using window.open() and data: scheme I have a web page that runs in a browser that generates a calculated HTML document that I ...
From 2024-04-06 15:06:34
0
1
378
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template