サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>下滑線導(dǎo)航</title>
<style>
*{margin: 0 ;padding: 0;}
ul{width: 900px;height: 60px;line-height: 60px;margin: 0 auto;background: #ccc;position: relative;}
ul li{width: 100px;height: 60px;text-align: center;list-style: none;float: left;font-size: 18px;}
ul li:hover{color:#6500ff;background: cyan;}
.line{width: 96px;border: 2px solid coral;position: absolute;left:270px;top:56px;}
</style>
</head>
<body>
<ul class="uu">
<li name='0'>產(chǎn)品發(fā)布</li>
<li name='1'>規(guī)格選型</li>
<li name='2'>技術(shù)要求</li>
<li name='3'>聯(lián)系我們</li>
<li name='4'>最新技術(shù)</li>
</ul>
<div class="line"></div>
<script tpye="text/javascript">
$(function(){
// $('.line').hide();
$('li').mouseover(function(){
$x = parseInt($(this).attr('name'))*100
$y = $x+270
$('.line').stop().animate({left:$y+'px'})
$('li').mouseleave(function(){
$('.line').stop().animate({left:'270'+'px'})
})
})
})
</script>
</body>
</html>
添削の先生：韋小寶添削時(shí)間：2019-02-28 09:13:47
先生のまとめ：寫(xiě)的很不錯(cuò) 效果也是很好看的 課后要記得多去練習(xí)