兩個有動畫功能的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   id="nptysji"   class="menu" id="test1">	<div   id="vsebuzy"   class="showhover"></div>	<div   id="wadghmy"   class="showmenu">		網站首頁		關于我們		新聞中心		產品中心		解決方案		聯系我們	</div></div><div style="clear:both;height:50px;"></div><div   id="bhspbgl"   class="menu" id="test2">	<div   id="akitqct"   class="showhover"></div>	<div   id="roseqrw"   class="showmenu">		網站首頁		關于我們		新聞中心		產品中心		解決方案		聯系我們	</div></div></body></html>

上一篇：光滑展開合攏的Js菜單效果

下一篇：風格經典，無任何修飾的CSS選項卡

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注