软件开发培训班 >> 编程开发 >> JavaScript

jquery 实现斜导航效果

　　本文标签：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> 
        <div id="menu1"> 
             
             
             
             
             
             
             
             
        </div> 
</body> 
</html>

技术文章快速查找

javascript prototype原型操作笔记

基于jQuery制作迷你背词汇工具

js怎样实现下拉框改变，它旁边的图像也改变

js innerHTML 的一些问题的解决方法

javascript学习笔记(十五) js间歇调用和超时调用

javascript 四则运算精度修正函数代码

JS自调用匿名函数具体实现

点击隐藏页面左栏或右栏实现js代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建