????：利用給導(dǎo)航條里的每個li元素設(shè)置一個固定屬性值數(shù)字,利用這個數(shù)字來判斷是第幾個li,控制下劃線的移動距離。<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8">
利用給導(dǎo)航條里的每個li元素設(shè)置一個固定屬性值數(shù)字,
利用這個數(shù)字來判斷是第幾個li,控制下劃線的移動距離。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
width: 600px;
height: 60px;
background: green;
margin: 0 auto;
border-radius: 5px;
box-shadow: 2px 2px 10px black;
z-index:10;
position:relative;
}
ul li{
list-style: none;
float: left;
width: 100px;
line-height: 60px;
font-size: 1.5rem;
text-align: center;
margin: 0 auto;
}
ul li:hover{color: red;cursor: pointer;}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li id="0">蘋果</li>
<li id="1">香蕉</li>
<li id="2">橘子</li>
<li id="3">西瓜</li>
<li id="4">橙子</li>
<div id="block" style="z-index:20;height: 5px;width: 100px;background: black;border-radius:50%;position: absolute;top: 50px"></div>
</ul>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function () {
$('li').hover(function () {
var $xx = parseInt($(this).attr('id'))*100+40;
$('#block').stop().animate({left:$xx+'px'},200);
},function () {
$('#block').stop().animate({left:'40px'},200);
});
});
</script>
</body>
</html>
?? ???：查無此人?? ??：2019-05-21 09:15:59
???? ??：完成的不錯。你做過的功能，都保存好，以后方便項目中使用。繼續(xù)加油。