abstract:模范案例:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下划线跟随导航的动画效果</title> <style type="text/css"
模范案例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下划线跟随导航的动画效果</title> <style type="text/css"> *{margin:0px;padding: 0px;} .menu{width:500px;height:35px;background:#F92659;border-radius: 5px;box-shadow:0 2px 20px #000;margin:20px auto; line-height: 35px;text-align:center;position:relative;} ul{list-style:none;position: relative;font-size: 15px;font-weight: bold;z-index:20;} li{float: left;display: inline-block;width: 100px;cursor: pointer;} </style> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> </head> <body> <script type="text/javascript"> $(function(){//$(function(){ jquery的代码块})是$(document).ready(function(){ jquery的代码块})的简写 $('li').hover( function(){ $x=parseInt($(this).attr('name'))*100//获得li的name属性值,注意this不用加‘’号 $('.block').stop().animate({left:$x+'px'},500) } , function(){ $('.block').stop().animate({left:'0px'},500) } ) }) </script> <div> <ul> <li name="0">首页</li> <li name="1">php中文网</li> <li name="2">html</li> <li name="3">JavaScript</li> <li name="4">css</li> </ul> <div style="z-index:10;width:100px;height:2px;background:#fff;position:absolute;top:35px;"></div><!-- 这个布局的position要设置 --> </div> </body> </html>