导航条底部横线过渡移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.box {
position: relative;
}
.list {
overflow: hidden;
background: #999;
}
.list li {
list-style: none;
float: left;
box-sizing: border-box;
padding: 10px 30px;
margin-left: 100px;
}
.line {
position: absolute;
top: 35px;
left: 100px;
display: inline-block;
height: 5px;
background: red;
transition: all .4s;
}
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="active">首页</li>
<li>关于</li>
<li>新闻早知道</li>
<li>我们</li>
<li>联系</li>
</ul>
<span class="line"></span>
</div>
<script type="text/javascript">
$(function() {
var lis = $(".list li");
var initLeft = 100;
var idx = 0;
var width = lis.eq(idx).outerWidth();
$('.line').css({
width: width
})
lis.hover(function() {
idx = $(this).index();
var hoverwidth = $(this).outerWidth();
$('.line').css({
left: lis.eq(idx)[0].offsetLeft,
width: hoverwidth
})
},function() {
$('.line').css({
left: initLeft,
width: width
})
})
lis.click(function() {
idx = $(this).index();
var clickLeft = initLeft = lis.eq(idx)[0].offsetLeft;
width = $(this).outerWidth();
$('.line').css({
left: clickLeft,
width: width
})
})
})
</script>
</body>
</html>
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
