recherche

Maison >interface Web >js tutoriel >jquery implémente le code de la zone de navigation qui s'étend vers la droite en haut_jquery

jquery implémente le code de la zone de navigation qui s'étend vers la droite en haut_jquery

WBOY
WBOYoriginal
2016-05-16 15:40:511194parcourir

L'exemple de cet article décrit l'implémentation jquery de l'indicatif de zone de navigation qui rétracte le haut vers la droite. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu similaire à la navigation, mais il est plus évolutif. Il peut non seulement être utilisé comme menu, mais également comme effet de bloc de navigation. Le bloc de navigation peut contenir des menus ou d'autres fonctions. jQuery. , cliquez sur la flèche à l’extrémité gauche du calque flottant avec la souris pour réduire et développer ce menu.

La capture d'écran de l'effet en cours d'exécution est la suivante :

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

http://demo.jb51.net/js/2015/jquery-right-hidden-show-nav-style-codes/

Le code spécifique est le suivant : 

<!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>

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

Déclaration：
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
Article précédent：Implémentation d'un code d'effet de changement de style simple basé sur les compétences JS_javascriptArticle suivant：Implémentation d'un code d'effet de changement de style simple basé sur les compétences JS_javascript

Articles Liés

Voir plus