abstract：学到和掌握的距离——实践应用。今天的知识点：hover(参数1：鼠标移上，参数二：鼠标离开)切换事件。还有一个toggle().自定义动画效果 animate({CSS属性},速度，函数) stop() 不许动parsInt(string) 转为整数 忽略非数字 它还有个兄弟 parseFloat(string)转为浮点型<!DOCTYPE html><html lang=&qu
学到和掌握的距离——实践应用。
今天的知识点：hover(参数1：鼠标移上，参数二：鼠标离开)切换事件。还有一个toggle().
自定义动画效果 animate({CSS属性},速度，函数) stop() 不许动
parsInt(string) 转为整数 忽略非数字 它还有个兄弟 parseFloat(string)转为浮点型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航之下划线跟随</title>
<script src="jquery/jquery-3.3.1.js"></script>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
ul li {width: 100px;height: 35px;line-height: 35px;text-align: center;cursor: pointer;float: left;color:blanchedalmond;}
.menu_box{width: 100%;background: #ccc;margin-top: 20px;}
.menu{ background: rgb(165, 57, 6);width: 800px;height: 35px;margin: auto;
border-radius: 5px;position: relative;box-shadow:0px 0px 20px rgb(165, 57, 6);}
.hr{width: 100px;height: 2px;background: beige;position: absolute;bottom: 0px;left: 0px;}
</style>
</head>
<body>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.hr').stop().animate({left:$x+'px'},50)
},
function(){
$('.hr').stop().animate({left:'0px'},50)
}
)
})
</script>
<div class="menu_box">
<ul class="menu">
<li class="m1" name="0">首页</li>
<li class="m2" name="1">商品</li>
<li class="m3" name="2">收藏夹</li>
<li class="m4" name="3">购物车</li>
<li class="m5" name="4">个人中心</li>
<div class="hr"></div>
</ul>
</div>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-02-11 10:10:42
Teacher's summary：总结的很棒！代码写的也很完整！下划线跟随导航的效果在很多网站的导航中都会出现