abstract: 要使下滑线跟随导航,,需在jQuery中设置一个相关功能的函数,使鼠标移动‘li’时找到相关的name值并生成自定义动画,再在之后设置一函数使鼠标不在‘li’标签时默认在第一个标签之下。完整代码如下: <!DOCTYPE html> <html> <head>  
要使下滑线跟随导航,,需在jQuery中设置一个相关功能的函数,使鼠标移动‘li’时找到相关的name值并生成自定义动画,再在之后设置一函数使鼠标不在‘li’标签时默认在第一个标签之下。
完整代码如下:
<!DOCTYPE html> <html> <head> <title>下滑线跟随导航</title> <meta charset="utf-8"/> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style type="text/css"> *{padding:0;margin:0;} ul {list-style: none;position:relative;font-size: 15px;} li {float:left;cursor:pointer;width:100px;height: 30px;text-align:center;line-height:30px;color: #fff;font-weight: bold;font-family: 宋体;} .menu{width:500px;position:relative;margin:20px auto;height:32px;box-shadow: 10px 10px 100px #000;background: #9C44A8;border-radius:3px } </style> <script type="text/javascript"> $(function(){ $('li').hover( function(){ $x=parseInt($(this).attr('name'))*100 $('.box').stop().animate({left:$x+'px'},250) }, function(){ $('.box').stop().animate({left:'0px'},250) } ) }) </script> </head> <body> <div class="menu"> <ul> <li name="0">詹姆斯</li> <li name="1">浓眉</li> <li name="2">库兹马</li> <li name="3">球哥</li> <li name="4">英格拉姆</li> </ul> <div class="box" style="z-index:10;width:100px;height:2px;background:#000;position:absolute;top:30px;"></div> </div> </body> </html>
Correcting teacher:天蓬老师Correction time:2019-02-20 15:42:07
Teacher's summary:<style type="text/css">, 里面的type属性, 下次不要写了,没必要