返回顶部

收藏

jQuery自适应宽度背景跟随滑动导航(完善版)

更多

jQuery自适应宽度背景跟随滑动导航

[JavaScript]代码

<!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 type="text/javascript" src="http://outofmemory.cn/static/js/jquery-1.7.2.min.js"></script>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
q:before,q:after{content:''}
p{ margin:0 0 5px 0; line-height:160%; }
img { margin:0; padding:0; border:none; outline:none;}
.left { float:left;}
.right { float:right;}
.clear { clear:both;}
.clear_div{ height:1px; overflow:hidden; clear:both;}
.margin-t{ margin-top:10px;}
.margin-b{ margin-bottom:10px;}
a{ text-decoration:none; color:#000000; outline:none; blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */ 
li,span,a{ line-height:110%;}
body{ width:960px; overflow:hidden; margin:0 auto; font-size:12px;}
h1{ font-size:14px; text-align:center; margin-top:20px;}
p{ font-family:"微软雅黑"; color:#666666; padding-top:15px;}
p.title{ padding-left:33px; background:url(point.gif) left 20px no-repeat; _background:url(point.gif) left 19px no-repeat;}
p.copy_right{ color:#CCCCCC; text-align:right;}
/*************************************************************************************************************************************************/
.nav{ width:958px; height:30px; overflow:hidden; margin:0 auto 30px auto; position:relative; border:1px solid #676767;  background:url(nav_bg.jpg) repeat-x;}
.nav_list{ overflow:hidden; position:relative; z-index:1;}
.nav_list li{ float:left; padding:0 10px; margin:0 5px; _display:inline;}
.nav_list li a{ line-height:30px; font-family:"微软雅黑"; font-size:13px; color:#FFFFFF;}

.nav_1{ width:958px; height:30px; overflow:hidden; margin:0 auto 30px auto; position:relative; border:1px solid #999999; background:#CCCCCC}
.nav_list_1{ overflow:hidden; position:relative; z-index:1;}
.nav_list_1 li{ float:left; padding:0 5px; margin:0;}
.nav_list_1 li a{ line-height:30px; font-family:Arial; font-size:14px; color:#FFFFFF;}

.nav_2{ width:958px; height:30px; overflow:hidden; margin:0 auto 30px auto; position:relative; border:1px solid #999999; background:#CCCCCC}
.nav_list_2{ overflow:hidden; position:relative; z-index:1;}
.nav_list_2 li{ float:left; padding:0; margin:0 5px; _display:inline;}
.nav_list_2 li a{ line-height:30px; font-family:Arial; font-size:14px; color:#FFFFFF;}

.nav_3{ width:958px; height:30px; overflow:hidden; margin:0 auto 30px auto; position:relative; border:1px solid #999999; background:#CCCCCC}
.nav_list_3{ overflow:hidden; position:relative; z-index:1;}
.nav_list_3 li{ float:left; padding:0; margin:0;}
.nav_list_3 li a{ line-height:30px; font-family:Arial; font-size:14px; color:#FFFFFF;}

.nav_4{ width:958px; height:30px; overflow:hidden; margin:0 auto 30px auto; position:relative; border:1px solid #999999; background:#CCCCCC}
.nav_list_4{ overflow:hidden; position:relative; z-index:1;}
.nav_list_4 li{ float:left; padding:0 5px; margin:0 5px; _display:inline;}
.nav_list_4 li a{ line-height:30px; font-family:Arial; font-size:14px; color:#FFFFFF;}

.move{ width:0px; height:30px; overflow:hidden; background:url(move_bg.jpg) right top no-repeat; position:absolute; left:0; top:0; +z-index:-1;}
.move .move_left{ width:10px; height:30px; overflow:hidden; background:url(move_bg.jpg) no-repeat; float:left;}
.move_1{ width:0px; height:30px; overflow:hidden; background:#000000; position:absolute; left:0; top:0; +z-index:-1;}
.move_2{ width:0px; height:30px; overflow:hidden; background:#FF0000; position:absolute; left:0; top:0; +z-index:-1;}
.move_3{ width:0px; height:30px; overflow:hidden; background:#33CC66; position:absolute; left:0; top:0; +z-index:-1;}
.move_4{ width:0px; height:30px; overflow:hidden; background:#9966FF; position:absolute; left:0; top:0; +z-index:-1;}
</style>
<script type="text/javascript">
$(function(){  
 Menu(".nav",".nav_list",".move");
 Menu(".nav_1",".nav_list_1",".move_1");
 Menu(".nav_2",".nav_list_2",".move_2");
 Menu(".nav_3",".nav_list_3",".move_3");
 Menu(".nav_4",".nav_list_4",".move_4");
});
function Menu(nav_name,nav_list_name,move_name){
  var $nav_name = nav_name;
  var $nav_list = nav_name+">"+nav_list_name;
  var $move = nav_name+">"+move_name;
  var $li = nav_name+">"+nav_list_name+">"+"li";
  var $current_li = $nav_name+">"+nav_list_name+">"+"li.current";
  var $move = $nav_name+">"+move_name;
  var li_mar_left = parseInt($($li).css("margin-left"));
  var width = new Array();
  var width_mar = new Array();
  for(i=0;i<$($li).length;i++){
    width[i] = $($li).eq(i).outerWidth();
    width_mar[i] = $($li).eq(i).outerWidth("ture");
  }
  var current = $($current_li).index($li);
  $($move).css("width",width[current]+"px");
  $($li).hover(
    function(){
      var left=0;
      var index = $(this).index($li);
      for(i=0;i<=index;i++){
        left += width_mar[i];
      }
      if(left>0){
        left = left-width_mar[index]+li_mar_left;
      }
      $($move).stop().animate({"left":left+"px","width":width[index]+"px"},1000);
    },
    function(){}
  );
  $($nav_name).hover(
    function(){},
    function(){
      $($current_li).trigger("mouseenter");
    }
  );
  $($current_li).trigger("mouseenter");
}
</script>
</head>
<body>
<h1>jQuery自适应宽度背景跟随滑动导航</h1>
<p class="title">一.li标签 padding:0 10px; margin:0 5px; 的情况</p>
<div class="nav">
    <div class="move"><div class="move_left"></div><div class="move_con"></div><div class="move_right"></div></div>
    <ul class="nav_list">
    <li class="current"><a href="#">menu</a></li>
    <li><a href="#">menu222</a></li>
    <li><a href="#">menu33333</a></li>
    <li><a href="#">menu4444444</a></li>
    <li><a href="#">menu555</a></li>
    <li><a href="#">menu6</a></li>
    <li><a href="#">menu777777777777</a></li>
    <li><a href="#">menu88</a></li>
    <li><a href="#">menu9999999999</a></li>
  </ul>
</div>
<!---------------------------------------------------------------------------------------->
<p class="title">二.li标签 padding:0 5px; margin:0; 的情况</p>
<div class="nav_1">
    <div class="move_1"></div>
    <ul class="nav_list_1">
    <li class="current"><a href="#">menu1</a></li>
    <li><a href="#">menu222</a></li>
    <li><a href="#">menu33333</a></li>
    <li><a href="#">menu4444444</a></li>
    <li><a href="#">menu555</a></li>
    <li><a href="#">menu6</a></li>
    <li><a href="#">menu777777777777</a></li>
    <li><a href="#">menu88</a></li>
    <li><a href="#">menu9999999999</a></li>
  </ul>
</div>
<!---------------------------------------------------------------------------------------->
<p class="title">三.li标签 padding:0; margin:0 5px; 的情况</p>
<div class="nav_2">
    <div class="move_2"></div>
    <ul class="nav_list_2">
    <li class="current"><a href="#">menu1</a></li>
    <li><a href="#">menu222</a></li>
    <li><a href="#">menu33333</a></li>
    <li><a href="#">menu4444444</a></li>
    <li><a href="#">menu555</a></li>
    <li><a href="#">menu6</a></li>
    <li><a href="#">menu777777777777</a></li>
    <li><a href="#">menu88</a></li>
    <li><a href="#">menu9999999999</a></li>
  </ul>
</div>
<!---------------------------------------------------------------------------------------->
<p class="title">四.li标签 padding:0; margin:0; 的情况</p>
<div class="nav_3">
    <div class="move_3"></div>
    <ul class="nav_list_3">
    <li class="current"><a href="#">menu1</a></li>
    <li><a href="#">menu222</a></li>
    <li><a href="#">menu33333</a></li>
    <li><a href="#">menu4444444</a></li>
    <li><a href="#">menu555</a></li>
    <li><a href="#">menu6</a></li>
    <li><a href="#">menu777777777777</a></li>
    <li><a href="#">menu88</a></li>
    <li><a href="#">menu9999999999</a></li>
  </ul>
</div>
<!---------------------------------------------------------------------------------------->
<p class="title">五.li标签current类改变的情况</p>
<div class="nav_4">
    <div class="move_4"></div>
    <ul class="nav_list_4">
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu222</a></li>
    <li><a href="#">menu33333</a></li>
    <li class="current"><a href="#">menu4444444</a></li>
    <li><a href="#">menu555</a></li>
    <li><a href="#">menu6</a></li>
    <li><a href="#">menu777777777777</a></li>
    <li><a href="#">menu88</a></li>
    <li><a href="#">menu9999999999</a></li>
  </ul>
</div>
<!---------------------------------------------------------------------------------------->
<p>兼容:IE6-9,Mozilla Firefox,Google Chrome,Opera</p>
<p class="copy_right">作者:ydw0117,qq:59978934</p>
</body>
</html>

标签:jQuery,javascript

收藏

0人收藏

支持

0

反对

0

发表评论