jquery 实现斜导航效果

运行后刷新一下，才可以，也可以保存本地直接运行也可。

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery导航菜单</title> <style type="text/css"> #menu1 { width:970px;height:45px;} #menu1,#menu1 a , #menu1 a span{ background-image:url（http://img.jb51.net/demo/images/daohao.gif）;} #menu1 a{ display:block;float:left;height:45px;} #menu1 a span{ float:right;width:33px; height:45px; background-position:-970px 0;} #menu1 a span.sj{ background-position:-1003px 0;} #menu1 a.a1{ width:168px; background-position:0 0;} #menu1 a.a2{ width:117px; background-position:-168px 0;} #menu1 a.a3{ width:113px; background-position:-285px 0;} #menu1 a.a4{ width:114px; background-position:-398px 0;} #menu1 a.a5{ width:111px; background-position:-512px 0;} #menu1 a.a6{ width:114px; background-position:-623px 0;} #menu1 a.a7{ width:113px; background-position:-737px 0;} #menu1 a.a8{ width:120px; background-position:-850px 0;} #menu1 a.nowa1{ background-position:0 45px;} #menu1 a.nowa2{ background-position:-168px 45px;} #menu1 a.nowa3{ background-position:-285px 45px;} #menu1 a.nowa4{ background-position:-398px 45px;} #menu1 a.nowa5{ background-position:-512px 45px;} #menu1 a.nowa6{ background-position:-623px 45px;} #menu1 a.nowa7{ background-position:-737px 45px;} #menu1 a.nowa8{ background-position:-850px 45px;} </style> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></"></script> <script type="text/javascript"> function menu（nowa）//nowa 默认是哪个 0 1 2 3 4 5 6 7 { $（function（）{ $（"#menu1 a:not（:last）"）.append（"<span></span>"）; $（"#menu1 a"）.each（function（i）{ $（this）.addClass（"a"+（i+1））; if（i！=nowa）{ $（this）.hover（function（）{ $（this）.addClass（"nowa"+（i+1）） .prev（"a"）.find（"span"）.addClass（"sj"）; },function（）{ $（this）.removeClass（"nowa"+（i+1）） .prev（"a"）.find（"span"）.removeClass（"sj"）; }）; } }）; $（"#menu1 a:eq（"+nowa+"）"）.addClass（"nowa"+（nowa+1）） .prev（"a"）.find（"span"）.addClass（"sj"）; }）; } menu（0）; </script> </head> <body> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]