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://dl.glzy8.com/img/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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery-1.3.2.min.js%22%3E%3C%2F%22%3E%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20menu(nowa)%2F%2Fnowa%20%E9%BB%98%E8%AE%A4%E6%98%AF%E5%93%AA%E4%B8%AA%200%201%202%203%204%205%206%207%20%0D%0A%7B%20%0D%0A%20%20%20%20%24(function()%7B%20%0D%0A%20%20%20%20%20%20%20%20%24(%22%23menu1%20a%3Anot(%3Alast)%22).append('%3Cspan%3E%3C%2Fspan%3E')%3B%20%0D%0A%20%20%20%20%20%20%20%20%24(%22%23menu1%20a%22).each(function(i)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(this).addClass(%22a%22%2B(i%2B1))%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(i!%3Dnowa)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(this).hover(function()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(this).addClass(%22nowa%22%2B(i%2B1))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.prev(%22a%22).find(%22span%22).addClass(%22sj%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2Cfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(this).removeClass(%22nowa%22%2B(i%2B1))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.prev(%22a%22).find(%22span%22).removeClass(%22sj%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%24(%22%23menu1%20a%3Aeq(%22%2Bnowa%2B%22)%22).addClass(%22nowa%22%2B(nowa%2B1))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20.prev(%22a%22).find(%22span%22).addClass(%22sj%22)%3B%20%0D%0A%20%20%20%20%7D)%3B%20%0D%0A%7D%20%0D%0Amenu(0)%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
        <div id="menu1"> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
            <a href="#" _ewebeditor_ta_href="%23"></a> 
        </div> 
</body> 
</html>

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

教程首页更多教程