本文實例講述了jQuery ui實現動感的圓角漸變網站導航菜單效果代碼。分享給大家供大家參考。具體如下：
今天給大家分享一款基于jQuery UI的網站漸變導航菜單，可作為主導航，帶漸入漸出效果，鼠標移過菜單后，菜單項上顯示圓角背景，本地測試時，請注意引入的幾個JS腳本文件，最好是保存到你本地，菜單兼容性也不錯。
先來看運行效果截圖：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
