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

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

先来看运行效果截图：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-ui-CIC-le-button-style-web-nav-codes/

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=gb2312' /titlejQuery动态效果导航菜单/titlestyle type='text/css '！-@导入URL(http://字体。谷歌API。com/CSS？家庭=龙虾);正文{边际：0划水：0;背景# DDD } # nav { position : relative margin :40 px背景技术# eee划水：0;字体系列： '龙虾Helvetica阿里亚尔，无衬线；font-size :21 px-moz-边界-半径：5 px-khtml-边界-半径：5 px-web套件-边框-半径：5 px边界半径：5像素；-moz-box-shadow :2 px 2px 3px # CCC；-web kit-box-shadow :2 px2px 3px # CCC；盒影：2 px 2px 3px # CCC} #导航clear { clear : both } # nav ul { padd :0 0 5pxmargin 33600 list-style : none；} # nav Li { float : leftmargin 33605 px 10px 5px 0；背景技术# eee-moz-border-radius :5 px；-khtml-边界-半径：5 px-web套件-边框-半径：5 px边界半径：5像素；} #导航阿利{ text-摆设：无；color: # 9e0039显示：块；padd :10 px 15px }-/style脚本src=' http : js/jquery-1。6 .2 .量滴js '/script script src=' http : js/jquery-ui。量滴js '/脚本！表示“小而可爱的”的圆角-script src=' http : js/DD _ roundies _ 0。0 .2分钟。js '/脚本脚本DD _ roundies。addrule(' nav '，' 5px ')；DD _ roundies。addrule(' nav Li '，' 5px ')；/scriptscript$(文档)。ready(function(){ $ nav _ Li=$(' # nav Li ')；$nav_li_a=$('#nav阿利');定义变量动漫速度=450;//渐变速度var HoveTextColor=' # fff//将鼠标放在定义变量悬停背景颜色上的文本颜色=' # 9e0039//将鼠标放在var文本颜色=$ nav _ Li _ a . CSS('颜色')上的背景颜色；var背景COlOr=$ nav _ Li。CSS(' background-COlOr ')；//文本颜色动画$ nav _ Li _ a . hover(function(){ var $ this=$(this)；$this.stop().动画({ color : HeavTextColor }，anismeed)；}，function(){ var $ this=$(this)；$this.stop().动画化({ color: textColor }，animSpeed)；});//背景色动画$ nav _ Li。hover(function(){ var $ this=$(this)；$this.stop().动画({ backgroundColor:悬停背景颜色},动画速度);}，function(){ var $ this=$(this)；$this.stop().动画({背景色：背景色}，动画速度);});});/script/head dydiv id=' nav ' ul lia href=' # about '关于我/a/li lia href='#portfolio '配置说明/a/李最近'回收清单/a/Li lia实验'心情速递/a/li lia href='#contact '联系我/a/Li/ul div class=' clear '/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。