两个有动画功能的jQuery导航菜单

2024-09-05 12:20:50

字体：大中小

来源：转载

供稿：网友

两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。

<!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="/ajaxjs/jquery-1.4.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">		网站首页		关于我们		新闻中心		产品中心		解决方案		联系我们	</div></div><div style="clear:both;height:50px;"></div><div class="menu" id="test2">	<div class="showhover"></div>	<div class="showmenu">		网站首页		关于我们		新闻中心		产品中心		解决方案		联系我们	</div></div></body></html>

上一篇：光滑展开合拢的Js菜单效果

下一篇：风格经典，无任何修饰的CSS选项卡

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注