suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert Schiebemenücode mit Verzögerungseffekt_jquery

jQuery implementiert Schiebemenücode mit Verzögerungseffekt_jquery

WBOY
WBOYOriginal
2016-05-16 15:40:491333Durchsuche

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung von Sliding-Menü-Code mit Verzögerungseffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein auf jQuery basierendes Schiebemenü, und der Hintergrund des Menüs kann darüber gleiten. Im Vergleich zu Menüs ohne Animation hat es einen umwerfenden Navigationseffekt ist wirklich ziemlich gut.

Schauen wir uns die Screenshots des Laufeffekts an:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/

Der spezifische Code lautet wie folgt: 

<!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>jQuery实用炫动的导航效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{width:960px;text-align:center;background:#06F;margin:0 auto;position:relative;}
.nav a{width:104px;height:41px;line-height:41px;display:inline-block;margin-right:30px;position:relative;z-index:11111;color:#FFF;}
.nav_bj{background:#F00;width:104px;height:41px;position:absolute;top:0;z-index:111;left:210px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 var xxx,re;
 $(".nav a").mouseover(function(){
  xxx=$(this).position().left;
  $(".nav_bj").animate({left:xxx})
  clearTimeout(re);
  }).mouseout(function(){
   clearTimeout(re);
   re=setTimeout(function(){
    $(".nav_bj").animate({left:210})
   },500);
  })
 })
</script>
</head>
<body>
<div class="nav">
<a href="#">首页</a>
<a href="#">脚本之家</a>
<a href="#">脚本下载</a>
<a href="#">网页特效</a>
<div class="nav_bj"></div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

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：Mehrere Bildanzeigen zeigen abwechselnd Effektcode an, der in JavaScript_Javascript-Kenntnissen implementiert istNächster Artikel：Mehrere Bildanzeigen zeigen abwechselnd Effektcode an, der in JavaScript_Javascript-Kenntnissen implementiert ist

In Verbindung stehende Artikel

Mehr sehen