jQuery melaksanakan dua kod menu navigasi dengan function

jQuery melaksanakan dua kod menu navigasi dengan function_jquery animasi

WBOY

Lepaskan： 2016-05-16 15:39:11

asal

997 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan dua kod menu navigasi dengan fungsi animasi. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah dua menu navigasi jQuery dengan fungsi animasi. Setiap satu mempunyai kesan latar belakang kecerunan. Anda boleh mengubah suai gaya menu itu sendiri. Ia sedia untuk digunakan sekali gus.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个有动画功能的导航菜单</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function()
{
 $("#test1 a").mouseover(function()
 { 
  var index = $("#test1 a").index(this);
  var width = $("#test1 a").width();
  $("#test1 .showhover").stop().animate({left:width*index},1000);
 })
 $("#test2 a").mouseover(function()
 { 
  var index = $("#test2 a").index(this);
  var width = $("#test2 a").width();
  $("#test2 .showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
 })
})
</script> 
<style type="text/css">
.body {margin:10px;}
img {border:0;}
a {text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
.menu {background:#003399; height:25px; width:600px; position:relative; overflow:hidden;}
.menu .showmenu, .menu .showhover{ position:absolute;}
.menu .showmenu a {float:left; display:block;}
.menu .showmenu a {font:700 12px/25px Microsoft YaHei; color:#fff; width:100px; height:25px; text-align:center;}
.menu .showhover {background:#990033; width:100px; height:25px;}
</style>
</head>
<body>
<div class="menu" id="test1">
 <div class="showhover"></div>
 <div class="showmenu">
  <a href="#">网站首页</a>
  <a href="#">关于我们</a>
  <a href="#">新闻中心</a>
  <a href="#">产品中心</a>
  <a href="#">解决方案</a>
  <a href="#">联系我们</a>
 </div>
</div>
<div style="clear:both;height:50px;"></div>
<div class="menu" id="test2">
 <div class="showhover"></div>
 <div class="showmenu">
  <a href="#">网站首页</a>
  <a href="#">关于我们</a>
  <a href="#">新闻中心</a>
  <a href="#">产品中心</a>
  <a href="#">解决方案</a>
  <a href="#">联系我们</a>
 </div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.