本文實例講述了jquery實現仿Flash的橫向滑動菜單效果代碼。分享給大家供大家參考。具體如下：
這是一個仿Flash的jquery滑動菜單，橫向，延時效果明顯，如果覺得延時太長的話，自己可以修改參數，通過這個菜單主要是想向大家掌握一些jQuery生成動畫的技巧，同時這也是jquery強大功能的體現。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-f-flash-style-move-menu-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>再發一個仿Flash的jquery滑動菜單，橫向</title><script type="text/javascript" src="jquery1.3.2.js"></script><script type="text/javascript" src="jquery.hoverIntent.js"></script><script language="javascript">$(function(){ hiConfig = { sensitivity: 1, interval: 100, timeout: 100, over: function() { var x=$(this).offset().left-$("#menu_bar ul").offset().left; $("#menu_bar span").animate({left:x+"px",top:'0px'},300); }, // function = onMouseOver callback (REQUIRED) out: function() {} } $("#menu_bar li").hoverIntent(hiConfig)})</script><style>body{text-align:center;font-size:12px;color:#333;font-family:"宋體";background:#fff;margin:0 auto;padding:0;}body > div{text-align:center;margin-right:auto;margin-left:auto;}div,form,ul,ol,li,span,p,dt,dd,dl{border:0;margin:0;padding:0;}img,a img{border:0;margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:400;margin:0;padding:0;}ul,ol,li{list-style:none;}td{word-break:break-all;}a{color:#003cc8;text-decoration:none;}a:hover{text-decoration:underline;color:blue;}.f_tahoma{font-family:Tahoma;}em,i{font-style:normal;}#menu_bar{widtH:600px;margin:0 auto;background:#000066; position:relative;height:30px;border:1px solid #CCCCCC}#menu_bar ul{height:30px;overflow:hidden; position:absolute;z-index:2;left:0px;top:0px;line-height:30px;}#menu_bar li{width:100px;float:left;text-align:center;font-size:14px;font-weight:bold}#menu_bar li a{color:#fff}#menu_bar li a:hover{color:#ff7800}#menu_bar span{display:block;position:absolute;background:#fff;filter: alpha(Opacity=40);opacity: 0.4;-moz-opacity: 0.4;-khtml-opacity: 0.4;width:100px;z-index:1;height:30px;left:0px;top:0px;}</style></head><body><div id="menu_bar"> <ul> <li><a href="#" target="_blank">首頁</a></li> <li><a href="#" target="_blank">ASP</a></li> <li><a href="#" target="_blank">PHP</a></li> <li><a href="#" target="_blank">ASP.NET</a></li> <li><a href="#" target="_blank">DELPHI</a></li> <li><a href="#" target="_blank">VC++</a></li> </ul> <span></span></div></body></html>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
