Heim >Web-Frontend >js-Tutorial >jquery implementiert den Code für den Navigationsbereich, der sich bei top_jquery nach rechts erstreckt
Das Beispiel in diesem Artikel beschreibt die JQuery-Implementierung des Navigationsbereichscodes, der den oberen Rand nach rechts zurückzieht. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein Menü, das der Navigation ähnelt, aber skalierbarer ist. Es kann nicht nur als Menü, sondern auch als Navigationsblockeffekt verwendet werden jQuery, klicken Sie mit der Maus auf den Pfeil am linken Ende der schwebenden Ebene, um dieses Menü zu reduzieren und zu erweitern.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/jquery-right-hidden-show-nav-style-codes/
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标单击控制收缩和展开的窗口</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{margin:0;padding:0;} #box{position:absolute;right:0;top:0;overflow:hidden;} #arrow{color:#fff;background:#000;width:20px;height:90px;line-height:90px;font-size:12px;font-family:"宋体";text-align:center;font-weight:bold;float:left;} #col_box{width:400px;height:90px;background:#eee;float:left;} </style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400; oArr.click(function(){ oMoveBox.animate({"width":"-="+maxL},600,function(){ maxL = -maxL; $("#arrow").html(maxL<0 ? "<" : ">"); }) }); }); </script> </head> <body> <div id="box"> <div id="arrow">></div> <div id="col_box">z<br>z<br>s<br>k<br>y</div> </div> </body> </html>
Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.