代码如下（样式可以自定义）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入可左右滑动导航小插件</title>
<style>
ul {
overflow:hidden;
position:relative;
list-style:none;
}
ul li {
float:left;
padding:10px 20px;
background:skyblue;
color:#fff;
font-size:20px;
cursor:pointer;
transition:all .2s linear;
}
ul span {
display:block;
width:100%;
height:2px;
background:#f60;
position:absolute;
bottom:0;
}
ul li:hover {
color:red;
}
</style>
</head>
<body>
<ul>
<li>导航栏1</li>
<li>导航栏2</li>
<li>导航栏3</li>
<li>导航栏4</li>
<li>导航栏5</li>
<span class="line"></span>
</ul>
<script>
$("ul span").css({
'left': $("ul li").eq(0).position().left,
'width': $("ul li").eq(0).outerWidth()
});
$("ul li").hover(function() {
$("ul span").stop().animate({
left: $(this).position().left,
width: $(this).outerWidth()
});
}, function() {
$("ul span").stop().animate({
left: $("ul li").eq(0).position().left,
width: $("ul li").eq(0).outerWidth()
});
});
</script>
</body>
</html>
效果图：
原创文章链接：http://www.zhicaipt.cn/hz_index/view/article_detail.html?id=43
网友评论