js implémente le code de menu pliable du panneau QQ avec des compétences de mise en mémoire tampon effect

Maison

interface Web

js tutoriel

js implémente le code de menu pliable du panneau QQ avec des compétences de mise en mémoire tampon effect_javascript

May 16, 2016 pm 03:40 PM

js Réduire le menu

L'exemple de cet article décrit l'implémentation js du code de menu pliable du panneau QQ avec effet de mise en mémoire tampon. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Code du menu pliable du panneau QQ avec effet tampon, méthode d'utilisation : effet d'appel : Effect(1,2) ; Parmi eux, 1 est : l'identifiant de l'objet modifié
Parmi eux, 2 est : L'identifiant du conteneur de contrôle peut être obtenu en utilisant : this.parentNode.id (l'identifiant de la balise parent)

Veillez à ne pas répéter l'ID de l'objet lorsque vous le donnez.

L'effet de l'opération est comme indiqué ci-dessous :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-buffer-style-qq-menu-codes/

Le code spécifique est le suivant :

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;带缓冲效果的仿QQ面板折叠菜单代码&lt;/title&gt;
&lt;script&gt;
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 = "&lt;a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');&gt;-&lt;/a&gt;"
 }else{ 
 Start(ObjectId,'Close');
 $G(parentId).innerHTML = "&lt;a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');&gt;+&lt;/a&gt;"
 }
}
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 &lt;= 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 &gt;= 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);
}
}
&lt;/script&gt;
&lt;style&gt;
table{width:192px;overflow:hidden}
#control,#control table,#control table td{ font-size:12px;}
#control{ width:192px; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; }
#control table{ width:192px; height:20px; overflow:hidden}
#control table li{ list-style:none;height:20px;line-height:20px; overflow:hidden}
#control table .tabTit{background:#E0E8B8;}
#control a { font-weight:normal; font-size:24px; color:#6F7848; text-decoration:none; padding-right:10px;}
#control .testLink{ font-weight:bold; font-size:12px}
.test{ width:192px;background-color:#f6f6f6;overflow:hidden; }
.test li{ list-style:none; color:#000; font-size:13px; line-height:20px;}
#control table,.test table{ margin:0 auto; text-align:center}
.STYLE1 {
 font-size: 8px;
 color: #fff;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="control"&gt;
 &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td width="100%" align="center" class="tabTit" &gt;&lt;li id="testtab" style="float:right"&gt;&lt;a href="#" onClick="Effect('test',this.parentNode.id);" &gt;+&lt;/a&gt; &lt;/li&gt;&lt;li style="float:left"&gt;&lt;a href="#" onClick="Effect('test');" class="testLink"&gt;缓冲菜单&lt;/a&gt; &lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;div id="test" class="test" style="display:none;"&gt;
 &lt;table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"&gt;
 &lt;tr&gt;
 &lt;td colspan="3" align="center" valign="top"&gt;&lt;ul&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;div id="control"&gt;
 &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td width="100%" align="center" class="tabTit" &gt;&lt;li id="test1tab" style="float:right"&gt;&lt;a href="#" onClick="Effect('test1',this.parentNode.id);" &gt;+&lt;/a&gt; &lt;/li&gt;&lt;li style="float:left"&gt;&lt;a href="#" onClick="Effect('test1');" class="testLink"&gt;缓冲菜单&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;div id="test1" class="test" style="display:none;"&gt;
 &lt;table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"&gt;
 &lt;tr&gt;
 &lt;td colspan="3" align="center" valign="top"&gt;&lt;ul&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;div id="control"&gt;
 &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td width="100%" align="center" class="tabTit" &gt;&lt;li id="test2tab" style="float:right"&gt;&lt;a href="#" onClick="Effect('test2',this.parentNode.id);" &gt;+&lt;/a&gt; &lt;/li&gt;&lt;li style="float:left"&gt;&lt;a href="#" onClick="Effect('test2');" class="testLink"&gt;缓冲菜单&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;div id="test2" class="test" style="display:none;"&gt;
 &lt;table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"&gt;
 &lt;tr&gt;
 &lt;td colspan="3" align="center" valign="top"&gt;&lt;ul&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;div id="control"&gt;
 &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td width="100%" align="center" class="tabTit" &gt;&lt;li id="test3tab" style="float:right"&gt;&lt;a href="#" onClick="Effect('test3',this.parentNode.id);" &gt;+&lt;/a&gt; &lt;/li&gt;&lt;li style="float:left"&gt;&lt;a href="#" onClick="Effect('test3');" class="testLink"&gt;缓冲菜单&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;div id="test3" class="test" style="display:none;"&gt;
 &lt;table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"&gt;
 &lt;tr&gt;
 &lt;td colspan="3" align="center" valign="top"&gt;&lt;ul&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;div id="control"&gt;
 &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td width="100%" align="center" class="tabTit" &gt;&lt;li id="test4tab" style="float:right"&gt;&lt;a href="#" onClick="Effect('test4',this.parentNode.id);" &gt;+&lt;/a&gt; &lt;/li&gt;&lt;li style="float:left"&gt;&lt;a href="#" onClick="Effect('test4');" class="testLink"&gt;缓冲菜单&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;div id="test4" class="test" style="display:none;"&gt;
 &lt;table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"&gt;
 &lt;tr&gt;
 &lt;td colspan="3" align="center" valign="top"&gt;&lt;ul&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;li&gt;缓冲菜单&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.

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