Effet d'animation de navigation implémenté par jQuery (avec code source de démonstration)

Effet d'animation de navigation implémenté par jQuery (avec code source de démonstration)_jquery

WBOY

Libérer： 2016-05-16 15:07:00

original

1662 Les gens l'ont consulté

L'exemple de cet article décrit l'effet d'animation de navigation implémenté par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
On voit souvent sur Internet que lorsque la souris se déplace sur la navigation, la barre horizontale en bas de la navigation se déplacera automatiquement vers l'élément de navigation survolé par la souris.

L'effet est le suivant :

En utilisant la fonction animer de jquery, c’est facile à mettre en œuvre. Le code est très simple !

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>测试</title>
 <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="nav" style="margin: 100px auto; width:960px;">
<a class="active" href="#">首页</a>
<a href="#">产品</a>
<a href="#">新闻中心</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">首页</a>
<a href="#">首页</a>
<div class="line"></div>
</div>
<style>
.nav{
 position:relative;
}
.nav a{
 padding:10px 20px;
 border-bottom:solid 3px #fff;
 text-decoration: none;
 color:#666;
}
.nav a:hover{
 color:#66f;
}
.nav .active, .nav .active:hover{
 color:#f33;
}
.nav .line{
 position:absolute;
 border-top:solid 2px red;
 width:0;
 left:0;
 top:0;
}
</style>
<script>
function navLine(o, bo)
{
 var x = '' + (o.position().top + o.outerHeight() - 2) + 'px';
 var y = '' + o.position().left + 'px';
 var w = '' + o.outerWidth() + 'px';
 var h = '2px';
 $('.nav .line').stop();
 if (bo)
 {
  $('.nav .line').css({width:w, height:h, top:x, left:y});
 }
 else
 {
  $('.nav .line').animate({width:w, height:h, top:x, left:y});
 }
}
$(function(){
 navLine($('.nav .active'), true);
 $('.nav a').hover(function(){
  navLine($(this));
 }, function(){
  navLine($('.nav .active'));
 });
});
</script>
</body>
</html>

Copier après la connexion

Cliquez ici pour un exemple de code completTéléchargez depuis ce site.

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "jQuery plug-ins courants et résumé d'utilisation》

J'espère que cet article sera utile à tous ceux qui programment jQuery.