JQuery的滑动导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.dhl{width: 500px;height: 32px;margin: 20px auto;background: #c74832;border-radius: 3px;box-shadow: 0px 0px 10px #888;}
ul{list-style: none;}
ul li{width: 100px;height: 30px;float: left;text-align: center;line-height: 30px;font-weight: bold;color: white;}
</style>
<script type="text/javascript">
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr("name")*100);
$(".xhx").stop().animate({left: $x+"px"},300);
},
function(){
$(".xhx").stop().animate({left: "0px"},300);
}
)
})
</script>
</head>
<body>
<div class="dhl">
<ul>
<li name="0">首页</li>
<li name="1">百度</li>
<li name="2">谷歌</li>
<li name="3">搜狗</li>
<li name="4">淘宝</li>
</ul>
<div class="xhx" style="height: 2px;width: 100px;background: white;position: relative;top: 30px"></div>
</div>
</body>
</html>1，JQuery的切换事件hover()
hover(over,out)
over:当鼠标移到元素上时，触发函数
out: 当鼠标移出元素时，触发函数
2，parseInt()函数为解析字符串并返回整数
3，attr()设置或者返回元素的属性值