abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery</title> <script type="text/javascript" src="jq
<!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:當(dāng)鼠標(biāo)移到元素上時，觸發(fā)函數(shù)
out: 當(dāng)鼠標(biāo)移出元素時，觸發(fā)函數(shù)
2，parseInt()函數(shù)為解析字符串并返回整數(shù)
3，attr()設(shè)置或者返回元素的屬性值
Correcting teacher：天蓬老師Correction time：2018-11-29 00:01:53
Teacher's summary：感覺你好像沒有寫完, 希望不要為了完成而完成,這樣刷課,最終受傷的是你自己, 這次先通過, 下次請認(rèn)真完成作業(yè)