返回图片跟随系统...登陆

图片跟随系统

A00A-KAจุ๊บ 2019-08-27 15:03:2716

<!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>


最新手记推荐

• 新闻模块对应模块的代码• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网