abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下划线跟随导航</title> <script type="text/javascript" src="jque
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下划线跟随导航</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> *{padding: 0;margin: 0;} ul{list-style: none;z-index: 20;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;} .menu{width: 700px;position: relative;margin: 20px auto;height: 32px;box-shadow: 0 2px 20px #000;background: #AF3434;border-radius: 3px;} </style> </head> <body> <script type="text/javascript"> $(function(){ $('li').hover(function(){ $x=parseInt($(this).attr('name'))*100 $('.block').stop().animate({left:$x+'px'},300) }, function(){ $('.block').stop().animate({left:'0px'},300) } ) }) </script> <div> <ul> <li name="0">首页</li> <li name="1">视频教程</li> <li name="2">社区问答</li> <li name="3">编程词典</li> <li name="4">手册下载</li> <li name="5">工具下载</li> <li name="6">菜鸟学堂</li> </ul> <div style="z-index: 10;width:100px;height: 2px;background: #fff;position: absolute;top: 30px;"></div></div> </body> </html>
Correcting teacher:灭绝师太Correction time:2018-11-28 14:08:12
Teacher's summary:作业完成的不错,代码条理清晰,继续保持!