Heim > Artikel > Web-Frontend > jquery implementiert den Code für den Navigationsbereich, der sich bei top_jquery nach rechts erstreckt

jquery implementiert den Code für den Navigationsbereich, der sich bei top_jquery nach rechts erstreckt

WBOYOriginal: 2016-05-16 15:40:511135Durchsuche

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 &#63; "<" : ">");
  })
 });
});
</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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementierung eines einfachen Stilwechseleffektcodes basierend auf JS_Javascript-KenntnissenNächster Artikel：Implementierung eines einfachen Stilwechseleffektcodes basierend auf JS_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen