下划线跟随导航的动画效果总结

Original 2018-10-30 09:57:39 289
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>


Release Notes

Popular Entries