suchen

Heim  >  Artikel  >  Web-Frontend  >  Von jQuery implementierter Navigationsanimationseffekt (mit Demo-Quellcode)_jquery

Von jQuery implementierter Navigationsanimationseffekt (mit Demo-Quellcode)_jquery

WBOY
WBOYOriginal
2016-05-16 15:07:001632Durchsuche

Das Beispiel in diesem Artikel beschreibt den von jQuery implementierten Navigationsanimationseffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Im Internet sieht man oft, dass sich die horizontale Leiste am unteren Rand der Navigation automatisch zu dem Navigationselement bewegt, über das sich die Maus bewegt, wenn die Maus über die Navigation bewegt wird.

Der Effekt ist wie folgt:

Mit der Animationsfunktion von jquery ist die Implementierung einfach. Der Code ist sehr einfach!

Der Code lautet wie folgt: 

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

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.

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：So verwenden Sie das Jquery-Formularvalidierungs-Plug-in formValidator_jqueryNächster Artikel：So verwenden Sie das Jquery-Formularvalidierungs-Plug-in formValidator_jquery

In Verbindung stehende Artikel

Mehr sehen