jQuery导航特效 - 鼠标滑过/滑动遮罩背景图片跟随

这种遮罩效果的菜单滑动，背景图片可以动态滑动特效代码：

!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>
    鼠标滑过遮罩跟随jQuery导航 - 站长素材/title>
        script src="js/jquery.min.js">
    /script>
        script type="text/javascript">
    	$(document).ready(function(e) {
        var navLi = $("#nav-div ul li"),    navUl = $("#nav-div ul"),    speed = 200;
    function OnClick(){
        n =  navUl.find("li.on").index();
    navUl.stop().animate({
backgroundPosition:navLi.width()*n}
    ,speed);
    }
        OnClick();
	    navLi.hover(    function(){
        n = $(this).index();
    navUl.stop().animate({
backgroundPosition:navLi.width()*n}
    ,speed);
    }
,    function(){
        OnClick();
    }
)    navLi.click(function(){
    $(this).addClass("on").siblings().removeClass("on")    }
    );
    	$(window).scroll(function() {
        	if($(window).scrollTop() >
  $("#nav").height()+50){
    $("#nav").addClass("scoll_nav")    	}
    	else{
    $("#nav").removeClass(	"scoll_nav")    }
    }
    );
	   	   	         }
    )    /script>
        style type="text/css">
    body,html{
     padding:0;
     margin:0;
}
    a{
     text-decoration:none;
     color:#FFF;
     font-weight:bold;
     font-size:14px;
}
    div,ul,li{
     padding:0;
     margin:0;
}
    #nav-div{
     width:1020px;
     height:42px;
     background:#1BA2E1;
     margin:auto;
     position:relative;
}
    ul{
     width:100%;
     height:42px;
    list-style:none;
     cursor:pointer;
     background: url(images/nav_on.png) no-repeat;
}
    #nav-div ul li{
     width:100px;
     height:42px;
     line-height:42px;
     text-align:center;
     margin:auto;
     float:left;
     color:#FFF;
     cursor:pointer;
}
    #nav-div ul li:hover a{
     color: #FF6;
}
    #liItemPaner{
     width:100px;
     height:40px;
     background:#FC0;
     position:absolute;
  }
    .nav-side{
     width:1020px;
     margin:auto;
    height:42px;
     background: #1BA2E1;
 }
    .scoll_nav{
    width:100%;
    position:fixed;
     top:10px;
      z-index:10000;
}
    #nav .nav-on {
     color:#F00;
}
        /style>
        /head>
        body>
        br>
    br>
    br>
        div class="top">
    /div>
        div id="nav" class="nav-side">
        div id="nav-div">
        ul>
        li class="on">
    a href="#" >
    首页/a>
    /li>
        li>
    a href="#">
    下载中心/a>
    /li>
        li>
    a href="#">
    产品中心/a>
    /li>
        li>
    a href="http://sc.chinaz.com/">
    系统定制/a>
    /li>
        li>
    a href="#">
    解决方案/a>
    /li>
        li>
    a href="#">
    服务中心/a>
    /li>
        li>
    a href="#" >
    合作伙伴/a>
    /li>
        li>
    a href="#">
    关于我们/a>
    /li>
        /ul>
        /div>
        /div>
        div style="height:15px;
    ">
    /div>
        div style="text-align:center;
    clear:both">
        p>
    适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗./p>
        /div>
        /body>
        /html>
    

目前有不少模板都使用了这种动态的滑动效果，虽然zblog模板用的不多，但在PC时代未结束之前，这种效果必然非常有市场！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！