Maison > interface Web > js tutoriel > le corps du texte

code du menu de navigation flottant dynamique jquery Sharing_jquery

WBOY
Libérer: 2016-05-16 15:44:42
original
1325 Les gens l'ont consulté

Il s'agit d'un code d'effets spéciaux basé sur jquery pour implémenter un menu de navigation flottant dynamique. Le menu peut flotter de haut en bas et est plein de dynamique, ce qui ajoute de la vitalité à votre site Web. C'est une source d'effets spéciaux de menu de navigation très pratique. code.

Opération de rendu :

Cliquez sur pour télécharger le code source

Le code du menu de navigation flottant dynamique jquery partagé avec vous est le suivant

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>jQuery Floating Menu</title>
 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 <script>
 
 $(document).ready(function () {

 //get the default top value
 var top_val = $('#menu li a').css('top');

 //animate the selected menu item
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 

 $('#menu li').hover(
 function () {
 
 //animate the menu item with 0 top value
 $(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 },
 function () {

 //set the position to default
 $(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500}); 

 //always keep the previously selected item in fixed position 
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 } 
 );
 
 });
 
 </script>
 
 <style>
 

 #menu {
 list-style:none; 
 padding:0;
 margin:0 auto;;
 height:70px;
 width:600px;
 }
 
 #menu li {
 float:left;
 width:109px;
 height:inherit;
 position:relative;
 overflow:hidden;
 }

 #menu li a {
 position:absolute;
 top:20px;
 text-indent:-999em;
 background:url(menu.png) no-repeat 0 0;
 display:block; 
 width:109px; 
 height:inherit;

 /* fast png fix for ie6 */
 position:relative;
 behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet&#63;this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1&#63;(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg&#63; this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
 }
 
 </style>
 
</head>
<body>
<br/><br/><br/>

<ul id="menu">
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Item 4</a></li>
 <li><a href="#">Item 5</a></li>
</ul>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>jQuery Floating Menu</title>
 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 <script>
 
 $(document).ready(function () {

 //get the default top value
 var top_val = $('#menu li a').css('top');

 //animate the selected menu item
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 

 $('#menu li').hover(
 function () {
 
 //animate the menu item with 0 top value
 $(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 },
 function () {

 //set the position to default
 $(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500}); 

 //always keep the previously selected item in fixed position 
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 } 
 );
 
 });
 
 </script>
 
 <style>
 

 #menu {
 list-style:none; 
 padding:0;
 margin:0 auto;;
 height:70px;
 width:600px;
 }
 
 #menu li {
 float:left;
 width:109px;
 height:inherit;
 position:relative;
 overflow:hidden;
 }

 #menu li a {
 position:absolute;
 top:20px;
 text-indent:-999em;
 background:url(menu.png) no-repeat 0 0;
 display:block; 
 width:109px; 
 height:inherit;

 /* fast png fix for ie6 */
 position:relative;
 behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet&#63;this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1&#63;(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg&#63; this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
 }
 
 </style>
 
</head>
<body>
<br/><br/><br/>

<ul id="menu">
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Item 4</a></li>
 <li><a href="#">Item 5</a></li>
</ul>
Copier après la connexion

Ce qui précède est le code du menu de navigation flottant dynamique jquery partagé avec vous. J'espère qu'il vous plaira.

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal