导航栏，下面的横线随事件而加载动画效果

使用JQUERY事件+相对应函数完美解决。

图片效果类似这样：


html：

class类名命名有些繁琐，懒得改了

<div class="top">
  <div class="top_box"> <img class="top_box_img" src="#logo">
    <div class="top_box_right">
      <div class="top_box_right_box">
        <div class="top_box_title">111</div>
      </div>
      <div class="top_box_right_box">
        <div class="top_box_title">222</div>
      </div>
      <div class="top_box_right_box">
        <div class="top_box_title">333</div>
      </div>
      <div class="top_box_right_box">
        <div class="top_box_title">444</div>
      </div>
      <div class="top_box_right_box">
        <div class="top_box_title">555</div>
      </div>
      <div class="top_box_right_box">
        <div class="top_box_title">666</div>
      </div>
      <div class="top_hr"></div>
    </div>
  </div>
</div>

css：

这里每个单位的宽度设置为100px；配合JS进行相对应的设置；

.top{
	position:absolute;
	width:100%;
	min-width: 1200px;/*这个是防止背景在小于1200px时，还有颜色*/
	height:60px;
	background:#0C1A36;
	top: 0;
	left:0;
	opacity: 0.8;
	z-index: 100;
}
.top_box{
	position: absolute;
	left:0;
	right:0;
	margin: auto;
	width:1200px;
	height:60px;
	font-size: 0
}
.top_box_img{
	position:absolute;
	left:0;
	top:0;
	width:242px;
	height:60px;
}
.top_hr{
	position:absolute;
	clear:both;
	margin: 0 0 4px 0;
	padding: 0;
	width:40px;
	height:2px;
	background: #ffffff;
	bottom: 0;
	left:230px;
}
.top_box_right{
	position:absolute;
	right:0;
	height:60px;
	color: #ffffff;
}
.top_box_right_box{
	position:relative;
	width:100px;
	height:60px;
	display: inline-block;
	font-size: 14px;
}
.top_box_title{
	position:absolute;
	text-align: center;
	width:100px;
	line-height: 60px;
	top:0;
	botom:0;
	left:0;
	right:0;
	margin: auto;
}

js：
关键代码

这里利用的都是最为基础的jquery知识；因为css预定的100px，所以这里设置的值相对应的也是100px，
关键代码行：$to{p}_{h}r0.stop();//这行代码决定了每执行一个事件是否停止当前正在执行的代码。如果没有这行代码......（自己尝试吧，懒得解释了）放在$(docunment).reday(function(){ /* ~代码放在这里面 ~*/ })

/*
		上方导航栏滑块展示
	*/
	
	var $top_hr0 =$(".top_hr");
	var $top_list0 = $(".top_box_right_box");
	
	function $startfunction (){
		$top_hr0.stop();
		var $top_math0 = $(this).index();
		var $mytop_math0 = 30 + $top_math0*100 + "px";
		$top_hr0.animate({left:$mytop_math0},200);
	}
	
	function $endfunction (){
		$top_hr0.stop();
		$top_hr0.animate({left:"230px"},400)
	}
	$top_list0.mouseover($startfunction);
	$top_list0.mouseleave($endfunction);
	

图解就算了，没啥意思（主要是自己太懒了），看效果自己复制粘贴，效果就出来l~