jQuery ui动感的圆角渐变网站导航菜单

时间：2013-08-07 08:37 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动态效果导航菜单-源码搜藏网</title>
<style type="text/css">

</style>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script src="http://www.codefans.net/jscss/demoimg/201308/DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>
<script>
$(document).ready(function(){
	$nav_li=$("#nav li");
	$nav_li_a=$("#nav li a");
	var animSpeed=450; //fade speed
	var hoverTextColor="#fff"; //text color on mouse over
	var hoverBackgroundColor="#9e0039"; //background color on mouse over
	var textColor=$nav_li_a.css("color");
	var backgroundColor=$nav_li.css("background-color");
	//text color animation
	$nav_li_a.hover(function() {
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed);
	},function() {
		var $this=$(this);
		$this.stop().animate({ color: textColor }, animSpeed);
	});
	//background color animation
	$nav_li.hover(function() {
		var $this=$(this);
		$this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
    	var $this=$(this);
		$this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);
	});
});
</script>
</head>
<body>
<div id="nav">
<ul>
    <li><a href="http://www.codesocang.com/about/256.html">关于我</a></li>
        <li><a href="http://www.codesocang.com/texiao/index.html">网页特效</a></li>
        <li><a href="http://www.codesocang.com/yuanma/index.html">网站源码</a></li>
        <li><a href="http://www.codesocang.com/shiliang/index.html">矢量素材</a></li>
        <li><a href="http://www.codesocang.com/about/247.html">联系我</a></li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>