<!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>
百度运动导航栏
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 这是在百度百科中的效果 下面我们开始在ng2中实现1.用一套数据绑定两个区域：主页面和导航栏 html代码： co...
- 底部导航栏和侧滑栏现在在安卓应用中是二分天下的局面呀，就我而言，还是比较喜欢底部导航栏的，我们写底部导航栏方式可以...
