Heim > Artikel > Web-Frontend > Super cooler, von jQuery_jquery implementierter, ausziehbarer Menüeffektcode für Symbole im Apple-Stil

Super cooler, von jQuery_jquery implementierter, ausziehbarer Menüeffektcode für Symbole im Apple-Stil

WBOYOriginal: 2016-05-16 15:39:031241Durchsuche

Das Beispiel in diesem Artikel beschreibt den coolen, von jQuery implementierten Effektcode für ein ausziehbares Menü mit Symbolen im Apple-Stil. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein supercooles Icon-Slide-Out-Menü im Apple-Stil, das die jquery1.3.2-Bibliotheksdatei aufruft. Das gesamte Menü ist voller Dynamik und wird der Website viel Farbe verleihen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-apple-style-ico-show-menu-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>超酷苹果风格图标滑出菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style>
 body{
  margin:0px;
  padding:0px;
  background-color:#f0f0f0;
  font-family:Arial;
 }
 .title{
  position:absolute;
  top:100px;
  left:50%;
  margin-left:-204px;
  width:409px;
  height:348px;
  background:transparent url(images/title.png) no-repeat top left;
 }
 .info{
  position:fixed;
  bottom:0px;
  left:0px;
 }
 .back{
  display:block;
  background:transparent url(images/back.png) no-repeat top left;
  width:281px;
  height:143px;
 }
 a.dry{
  position:absolute;
  bottom:10px;
  right:10px;
  color:#000;
  font-weight:bold;
  font-size:16px;
 }
.navigation{
 position:relative;
 margin:0 auto;
 width:915px;
}
ul.menu{
 list-style:none;
 font-family:"Verdana",sans-serif;
 border-top:1px solid #bebebe;
 margin:0px;
 padding:0px;
 float:left;
}
ul.menu li{
 float:left;
}
ul.menu li a{
 text-decoration:none;
 background:#7E7E7E url(images/bgMenu.png) repeat-x top left;
 padding:15px 0px;
 width:128px;
 color:#333333;
 float:left;
 text-shadow: 0 1px 1px #fff;
 text-align:center;
 border-right:1px solid #a1a1a1;
 border-left:1px solid #e8e8e8;
 font-weight:bold;
 font-size:13px;
 -moz-box-shadow: 0 1px 3px #555;
 -webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
 background-image:none;
 color:#fff;
 text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
 -moz-border-radius:0px 0px 0px 10px;
 -webkit-border-bottom-left-radius: 10px;
 border-left:none;
}
ul.menu li a.last{
 -moz-border-radius:0px 0px 10px 0px;
 -webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
 width:64px;
 height:64px;
 background-repeat:no-repeat;
 background-color:transparent;
 position:absolute;
 z-index:-1;
 top:80px;
 cursor:pointer;
}
ul.menu li span.ipod{
 background-image:url(images/ipod.png);
 left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
 background-image:url(images/video_camera.png);
 left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
 background-image:url(images/television.png);
 left:293px;
}
ul.menu li span.monitor{
 background-image:url(images/monitor.png);
 left:423px;
}
ul.menu li span.toolbox{
 background-image:url(images/toolbox.png);
 left:553px;
}
ul.menu li span.telephone{
 background-image:url(images/telephone.png);
 left:683px;
}
ul.menu li span.print{
 background-image:url(images/print.png);
 left:813px;
}
</style>
 </head>
 <body>
 <div class="navigation">
  <ul class="menu" id="menu">
  <li><span class="ipod"></span><a href="#" class="first">Players</a></li>
  <li><span class="video_camera"></span><a href="#">Cameras</a></li>
  <li><span class="television"></span><a href="#">TVs</a></li>
  <li><span class="monitor"></span><a href="#">Screens</a></li>
  <li><span class="toolbox"></span><a href="#">Tools</a></li>
  <li><span class="telephone"></span><a href="#">Phones</a></li>
  <li><span class="print"></span><a href="#" class="last">Printers</a></li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery1.3.2.js"></script>
 <script type="text/javascript">
  $(function() {
  var d=1000;
  $('#menu span').each(function(){
   $(this).stop().animate({
   'top':'-17px'
   },d+=250);
  });
  $('#menu > li').hover(
  function () {
   var $this = $(this);
   $('a',$this).addClass('hover');
   $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
  },
  function () {
   var $this = $(this);
   $('a',$this).removeClass('hover');
   $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
  }
  );
  });
 </script>
 </body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung 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：Verwenden der JQUERY-Paging-Steuerung in ANGULARJS_AngularJSNächster Artikel：Verwenden der JQUERY-Paging-Steuerung in ANGULARJS_AngularJS

In Verbindung stehende Artikel

Mehr sehen