图片跟随系统

原创2019-08-27 15:03:2714
摘要:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, in

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>图片跟随系统</title>

   <script src="jquery-3.3.1.min.js"></script>

   <style>

       *{

           margin: 0;

           padding: 0;

       }

       body{

           list-style: none;

       }

      #nav{

          width: 500px;height: 30px;background:black;margin: 0 auto;color: white;position: relative;

      }

      ul{

       position:relative;

      }

      #nav ul li{

          font-size: 15px;

          width: 100px;

          height: 30px;

          line-height: 30px;

          float: left;

          text-align: center;

          list-style: none;

          cursor:pointer;

         

      }

   </style>

   <script>

   $(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>

</head>

<body>

       

   <div id="nav">

       <ul>

           <li name="0">HTML</li>

           <li name="1">CSS</li>

           <li name="2">JAVASCRIPT</li>

           <li name="3">PHP</li>

           <li name="4">MYSQL</li>

       </ul>

       <div class="block" style="width: 100px;height: 10px;background:pink;position: absolute;margin-top: 30px;" ></div>

   </div>

   

</body>

</html>


批改老师:Peter-Zhu批改时间:2019-08-28 16:40:20
老师总结:下次把代码放在代码块中, 然后配个图再提交

发布手记

热门词条

第九期线上培训班