您的位置：首页 > 其它

鼠标移入导航下部分条状移动

2016-07-23 12:31 239 查看

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
font-family: 'Microsoft yahei';
}
.wrapper,
ul.list {
width: 500px;
height: 40px;
background: #000000;
margin: auto;
}

.wrapper {
position: relative;
}

ul.list li {
width: 100px;
height: 40px;
line-height: 40px;
color: #ffffff;
text-align: center;
float: left;
cursor: pointer;
}
.back {
position: absolute;
width: 100px;
height: 2px;
background: red;
left: 0;
bottom: 0;
}
</style>
</head>
<body>

<div class="wrapper">
<ul class='list'>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
<li>导航四</li>
<li>导航五</li>
</ul>

<div class="back"></div>
</div>

<script src="jquery.min.js"></script>
<script>
$(function () {
$('ul.list').find('li').on('mouseover', function () {
var _index = $(this).index();
var left = _index*100;

$('.back').animate({
left: left + 'px'
}, 300);
});
});
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航