<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 导航栏 </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
color: #FFFFFF;
font-weight: 900;
}
#box {
width: 1088px;
background: blue;
position: relative;
margin: 100px auto 0;
}
#list {
position: relative;
}
#list:after {
height: 0;
clear: both;
content: ".";
display: block;
visibility: hidden;
}
#list li {
float: left;
cursor: pointer;
list-style: none;
margin-right: 1px;
padding: 12px 20px;
position: relative;
z-index: 2;
}
#list li.active {
background: orangered;
}
#shade {
top: 0;
left: 0;
width: 0;
height: 100%;
position: absolute;
background: orangered;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li class="active">首页</li>
<li>关于我们</li>
<li>新闻</li>
<li>列表</li>
<li>视频</li>
<li>传媒</li>
<li>互联网</li>
<li>个性推荐</li>
<li>体育</li>
<li>房地产</li>
<li>娱乐</li>
<li>财经</li>
<li>联系我们</li>
<div id="shade"></div>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* outerWidth() 获取元素的宽度，相当于原声JS中的offsetWidth
*/
$(function(){
$('#shade').css({
'width' : $('#list li').outerWidth()
});
/**
* 用 mouseenter 和 mouseleave 实现滑动效果
*/
/*
$('#list li').mouseenter(function(){
$('#shade').stop().animate({
'width' : $(this).outerWidth(),
'left' : $(this).position().left
},500);
});
$('#list li').mouseleave(function(){
$('#shade').stop().animate({
'width' : $('#list li').outerWidth(),
'left' : '0'
},500);
});
*/
/**
* 用 hover 实现滑动效果
*/
$('#list li').hover(function(){
$('#shade').stop().animate({
'width' : $(this).outerWidth(),
'left' : $(this).position().left
},500);
},function(){
$('#shade').stop().animate({
'width' : $('#list li').outerWidth(),
'left' : '0'
},500);
});
});
/**
* 使用原声 JS 实现效果
*/
/*
var oBox = document.getElementById("box");
var oList = document.getElementById("list");
var oShade = document.getElementById("shade");
var oLi = oList.getElementsByTagName("li");
oShade.style.width = oLi[0].offsetWidth + 'px';
for( var i=0;i<oLi.length;i++ ){
oLi[i].index = i;
oLi[i].onmouseover = function(){
//获取阴影的宽度 等于划过 li 的宽度
oShade.style.width = oLi[this.index].offsetWidth + 'px';
oShade.style.left = oLi[this.index].offsetLeft + 'px';
};
oLi[i].onmouseout = function(){
oShade.style.width = '0';
oShade.style.left = '0';
};
};
*/
</script>
</body>
</html>