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

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

WBOY

Libérer： 2016-05-16 15:40:51

original

1144 Les gens l'ont consulté

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>

Copier après la connexion

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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