Heim > Artikel > Web-Frontend > jQuery implementiert dynamischen Menüeffektcode, der auf Änderungen des Maushintergrunds reagiert_jquery

jQuery implementiert dynamischen Menüeffektcode, der auf Änderungen des Maushintergrunds reagiert_jquery

WBOYOriginal: 2016-05-16 15:42:041134Durchsuche

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung eines dynamischen Menüeffektcodes, der auf Änderungen des Maushintergrunds reagiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein dynamisches jQuery-Menü, das auf Änderungen des Maushintergrunds reagiert. Bei der Implementierung dieses Menüs müssen Sie hauptsächlich Bilder ändern ist etwas problematisch. Der Effekt ist jedoch gut. Die höhere Version von jQuery wurde nicht getestet.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态导航菜单效果</title>
<style type="text/css" media="screen">
  body{
  background-color: #333; color:#FFFFFF
  }
  a{ color:#FFCC00;}
  #menuBar{
  overflow:hidden;
  width:503px;
  height:102px;
  background: transparent url(images/bar.jpg) no-repeat scroll left top;
  margin:0 auto;
  border:10px solid #111;
  }
  #menuBar ul{
  width:380px;
  margin:0 auto;
  list-style-type: none;
  }
  #menuBar ul li{
  float:left;
  padding-right:40px;
  }
  #menuBar a{
  width:55px;
  height:102px;
  display:block;
  background: transparent url(images/logos.jpg) no-repeat scroll left top;
  padding-top:100px;
  color:#ddd;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  font-size:10pt;
  font-weight:bold;
  outline:none;
  }
  #menuBar a:hover{
  background-image:url(images/logos-over.jpg);
  }
  #menuBar a#Home{
  background-position:-67px top;
  }
  #menuBar a#About{
  background-position:-166px top;
  }
  #menuBar a#Gallery{
  background-position:-266px top;
  }
  #menuBar a#Contact{
  background-position:-373px top;
  }
 </style>
 </head>
 <body>
 <div id="menuBar">
  <ul>
  <li><a href="#" id="Home">Home</a></li>
  <li><a href="#" id="About">About</a></li>
  <li><a href="#" id="Gallery">Gallery</a></li>
  <li><a href="#" id="Contact">Contact</a></li>
  </ul>
 </div><br />
 </body>
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 <script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
 $("a").mouseover(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"78px"}, 100);
 }).mouseout(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"100px"}, 100);
 });
 });
 </script>
</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：Zusammenfassung der Methoden zum Implementieren des verzögerten Ladens von Bildern in Javascript (drei Methoden)_Javascript-KenntnisseNächster Artikel：Zusammenfassung der Methoden zum Implementieren des verzögerten Ladens von Bildern in Javascript (drei Methoden)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen