サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/jQuery/jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.clear{clear: both;}
.box{
height: 80px;width: 1920px;background: #ff9c01;
box-shadow: 0px 6px 30px #000;
border-radius: 5px;
}
li{float: left;list-style: none;width: 300px;height: 70px;display: block;
text-align: center;line-height: 70px;font-size: 40px;font-weight: bold;
cursor: pointer;
}
ul{list-style: none}
.line{width: 200px;height: 10px;background: #fff;border-radius: 5px;margin-left: 50px;position: relative}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('li').hover(
// 鼠標(biāo)移上div位移
function () {
// $distance獲取每一個li應(yīng)該位移多遠(每一個li寬300)
//移上動作要加stop()，否則連續(xù)移動會延遲
$distance = parseInt($(this).attr('name'))*300;
$('.line').stop().animate({
left:$distance+'px',
},300);
},
// 鼠標(biāo)移開div回到起始位置
function () {
$('.line').stop().animate({
left:0,
},300);
},
);
});
</script>
</head>
<body>
<div class="box">
<ul>
<li name="0">首頁</li>
<li name="1">時事新聞</li>
<li name="2">娛樂節(jié)目</li>
<li name="3">汽車視頻</li>
<li name="4">醫(yī)療養(yǎng)生</li>
<li name="5">體育運動</li>
<div class="clear"></div>
</ul>
<div class="line"></div>
</div>
</body>
</html>
添削の先生：天蓬老師添削時間：2019-03-30 10:41:23
先生のまとめ：jquery中的自定義動畫,功能還是很強大的, 要注意它的參數(shù)是一個對象字面量, 重點放在一些主要參數(shù)上即可