jQuery implémente le code de menu de navigation noir pour retourner l'arrière-plan du survol de la souris-js tutoriel-php.cn

jQuery implémente le code de menu de navigation noir pour retourner l'arrière-plan du survol de la souris

PHPz

Libérer： 2018-09-28 17:52:46

avant

1315 Les gens l'ont consulté

Cet article présente principalement le code du menu de navigation noir pour jQuery pour réaliser un retournement d'arrière-plan avec la souris. Il implique les compétences des événements de souris jQuery combinées à une animation animée pour obtenir des effets de retournement d'arrière-plan. Il a une certaine valeur de référence. référez-vous à lui

L'exemple de cet article décrit le code du menu de navigation noir jQuery qui implémente le retournement de l'arrière-plan au survol de la souris. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu de navigation noir avec un retournement d'arrière-plan au survol de la souris implémenté par jQuery Lors de la prévisualisation de l'effet, une erreur sera affichée dans le coin inférieur gauche et l'effet ne peut pas être obtenu. être vu. Actualisez et vous pouvez voir l'effet ; Bien sûr, en utilisation réelle, un tel problème ne se produira pas.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démonstration en ligne est la suivante :

http://demo .jb51.net/js/2015 /jquery-mouse-over-bg-cha-black-nav-menu/

Le code spécifique est le suivant :

<!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">
.menu{height:41px;display:block;width:662px;}
.menu ul{list-style:none;padding:0;margin:0;}
.menu ul li{float:left;overflow:hidden;position:relative;text-align:center;height:38px;line-height:31px;*line-height:33px;background:url("images/tmenubg.png") repeat-x;}
.menu ul li a{position:relative;display:block;width:81px;height:31px;font-family:"Microsoft Yahei";font-size:12px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;}
.menu ul li a span{position:absolute;left:0;width:81px;}
.menu ul li a span.out{top:0px;}
.menu ul li a span.over,.menu ul li a span.bg{top:-45px;}
#menu{position:absolute;margin:4px 0px 0px 295px;*margin:4px 0px 0px -185px;}
#menu ul li a{color:#fff;text-decoration:none;}
#menu ul li a span.over{color:#000;text-decoration:none;}
#menu ul li span.bg{height:32px;background:url("images/overbg.png") center center no-repeat;}
#menu .fl{background:url("images/lrbg.png") no-repeat;width:7px;height:38px;float:left;}
#menu .fr{background:url("images/lrbg.png") no-repeat -8px 0px;width:7px;height:38px;float:right;}
</style>
<script src="jquery1.3.2.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
 $("#menu li a").wrapInner( &#39;<span class="out"></span>&#39; ).append( &#39;<span class="bg"></span>&#39; );
 $("#menu li a").each(function() {
  $( &#39;<span class="over">&#39; + $(this).text() + &#39;</span>&#39; ).appendTo( this );
 });
 $("#menu li a").hover(function() {
  $(".out", this).stop().animate({&#39;top&#39;: &#39;45px&#39;}, 250); // move down - hide
  $(".over", this).stop().animate({&#39;top&#39;: &#39;0px&#39;}, 250); // move down - show
  $(".bg", this).stop().animate({&#39;top&#39;: &#39;0px&#39;}, 120); // move down - show
 }, function() {
  $(".out", this).stop().animate({&#39;top&#39;: &#39;0px&#39;}, 250); // move up - show
  $(".over", this).stop().animate({&#39;top&#39;: &#39;-45px&#39;}, 250); // move up - hide
  $(".bg", this).stop().animate({&#39;top&#39;: &#39;-45px&#39;}, 120); // move up - hide
 });
 $("#menu2 li a").wrapInner( &#39;<span class="out"></span>&#39; );
 $("#menu2 li a").each(function() {
  $( &#39;<span class="over">&#39; + $(this).text() + &#39;</span>&#39; ).appendTo( this );
 });
 $("#menu2 li a").hover(function() {
  $(".out", this).stop().animate({&#39;top&#39;: &#39;45px&#39;}, 200); // move down - hide
  $(".over", this).stop().animate({&#39;top&#39;: &#39;0px&#39;}, 200); // move down - show
 }, function() {
  $(".out", this).stop().animate({&#39;top&#39;: &#39;0px&#39;}, 200); // move up - show
  $(".over", this).stop().animate({&#39;top&#39;: &#39;-45px&#39;}, 200); // move up - hide
 });
});
</script>
</head>
<body>
<p class="clear"></p>
<p id="content">
 <p id="top">
 <p id="menu" class="menu">
 <p class="fl"></p>
 <p class="fr"></p>
 <ul>
 <li><a href="#">脚本之家</a></li>
 <li><a href="#">产品介绍</a></li>
 <li><a href="#">软件下载</a></li>
 <li><a href="#">商业授权</a></li>
 <li><a href="#">模板市场</a></li>
 <li><a href="#">脚本下载</a></li>
 <li><a href="#">交流论坛</a></li>
 <li><a href="#">脚本交流</a></li>
 </ul>
 </p>
 </p>
</p>
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !