jQuery ui实现动感的圆角渐变网站导航菜单效果代码

时间：2021-05-26

本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码。分享给大家供大家参考。具体如下：

今天给大家分享一款基于jQuery UI的网站渐变导航菜单，可作为主导航，带渐入渐出效果，鼠标移过菜单后，菜单项上显示圆角背景，本地测试时，请注意引入的几个JS脚本文件，最好是保存到你本地，菜单兼容性也不错。

先来看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes/

具体代码如下：

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>jQuery动态效果导航菜单</title><style type="text/css"><!--@import url(http://fonts.googleapis.com/css?family=Lobster);body {margin:0; padding:0; background:#ddd;}#nav{position:relative; margin:40px; background:#eee; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}#nav .clear{clear:both;}#nav ul{padding:0 0 0 5px; margin:0; list-style:none;}#nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}#nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}--></style><script src="js/jquery-1.6.2.min.js"></script><script src="js/jquery-ui.min.js"></script><!-- rounded corners for IE --><script src="js/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="#about">关于我</a></li> <li><a href="#portfolio">配置说明</a></li> <li><a href="#recent">回收清单</a></li> <li><a href="#experiments">心情速递</a></li> <li><a href="#contact">联系我</a></li> </ul> <div class="clear"></div></div></body></html>

希望本文所述对大家的jquery程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章