jq下划线跟随导航案例,解答下导航不能居中问题

原创 2018-11-10 01:14:19 5
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq8</title> <script src="jquery-3.3.1.min.js"></script> &
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq8</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
*{padding: 0;margin: 0;}
ul{ list-style: none;z-index: 20; font-size: 15px;
position: relative; }
li{float: left; cursor: pointer; width: 100px;height: 30px;color:pink;background: blue;  border-radius:3px; text-align: center;line-height: 30px ;font-weight: bold;}
.menu{width: 400px;position: relative; height: 32px; background: pink; border-radius: 3px; box-shadow: 0 2px 20px #000; 
/*加居中下划线不能跟随?margin: 0px auto;*/}
/*jq下划线跟随导航案例,随便解答下问题
先获取li标签的值, 用parseInt取整,向左增加x像素
使用stop()停止动画效果,当向左位移到x位置时停止*/
</style>
<script>
$(function(){
$('li').hover(function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},200)
},
function(){
$('.block').stop().animate({left:'0px'},200)
}


)
})
</script>
</head>
<body>


     <script>
     
     </script>
     <div>
<ul>
<li name="0">首页</li>
<li name="1">夫是德国</li>
<li name="2">给对方</li>
<li name="3">各个地方</li>
</ul>

     </div>
     <div style="z-index: 10;width:100px;height: 2px;background: red;top: 30px; position: absolute;  "></div>
</body>
</html>

先获取li标签的值, 用parseInt取整,向左增加x像素,当向左位移到x位置时停止,使用stop()停止动画效果。有个问题:老师视频案例中是下划线能跟着导航默认居中的,我要怎么样才能实现这个效果?我现在交的案例是不居中的,如图

E9TNE)W~BD}]X5TK(WDN53V.png

批改老师:韦小宝批改时间:2018-11-10 09:54:47
老师总结:首先咱们先来看一下样式!你在css中有写.menu这个class,但是在下面的HTML代码中并没有class=menu的啊?jQuery中又出现了.block而你下面的代码中也并未出现class=bl

发布手记

热门词条