JQ事件练习

原创 2018-11-10 20:54:26 6
摘要:<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>Document</title>  <script src="https://code.jquery.com
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .menu{width: 500px;position: relative;margin: 20px auto;height: 32px;box-shadow: 0px 2px 20px #000;background: #AF3434;border-radius: 3px;}
        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;}
 </style>
 <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>
</head>
<body>
 <div class="menu">
       <ul>
        <li name="0">去去去</li>
        <li name="1">我我我</li>
        <li name="2">呃呃呃</li>
        <li name="3">日日日</li>
        <li name="4">通天塔</li>
       </ul>
      <div class="block" style="z-index:10;width:100px;height:2px;background:#fff;position:absolute;top:30px;"></div>
</body>
</html>


批改老师:灭绝师太批改时间:2018-11-11 09:25:17
老师总结:学习到现在,案例练习上可以找一些网页效果模仿一下,不要局限于测试

发布手记

热门词条