jquery鼠标滑过菜单颜色渐变显示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标滑过菜单颜色渐变显示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标滑过菜单颜色渐变显示</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>

<div id="content_wrap"><!--content wrap begins here-->

<div id="header">
<h1>jquery鼠标滑过菜单颜色渐变显示</h1>
</div>

<div id="navigation"><!--navigation starts here-->
   <ul class="nav_links">
        <li><a href="#">Page #1</a></li>
		<li class="withdiv"><a href="#">Page #2</a></li>
        <li class="withdiv"><a href="#">Page #3</a></li>
		<li class="withdiv"><a href="#">Page #4</a></li>
        <li class="withdiv"><a href="#">Page #5</a></li>
		<li class="withdiv"><a href="#">Page #6</a></li>
        <li class="withdiv"><a href="#">Page #7</a></li>
		<li class="withdiv"><a href="#">Page #8</a></li>
    </ul>
</div><!--navigation ends here-->
</div><!--content wrap ends here-->
</body>
</html>

JS代码(custom.js):

$(function(){
	// OPACITY OF BUTTON SET TO 100%$(".nav_links a").css("opacity","1.0");
	// ON MOUSE OVER$(".nav_links a").hover(function (){
	// SET OPACITY TO 30%$(this).stop().animate({
	opacity:0.3}
,"slow");
}
,// ON MOUSE OUTfunction (){
	// SET OPACITY BACK TO 100%$(this).stop().animate({
	opacity:1.0}
,"slow");
}
);
}
);

CSS代码(styles.css):

*{padding:0;margin:0;}
body{background-image:url(images/bg.png);background-repeat:repeat-x;background-color:#ebebeb;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#5f5f5f;}
#content_wrap{margin:auto;width:850px;margin-top:0;margin-right:auto;margin-left:auto;}
h1{color:#FF0000;text-align:center;margin-top:25px;}
#header{float:left;height:94px;width:850px;}
#navigation{float:left;height:62px;width:850px;}
.nav_links ul{margin:0px;padding:0px;}
.nav_links li{list-style:none;display:block;font-size:14px;float:left;}
.nav_links a{text-decoration:none;color:#990000;display:block;height:40px;padding-top:22px;padding-right:27px;padding-left:26px;}
.nav_links a:hover{color:#FFFFFF;background-image:url(images/hover.png);background-repeat:no-repeat;}
.withdiv{background-image:url(images/divider.png);background-repeat:no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)