jQuery总结和理解

原创 2018-11-10 21:33:48 2
摘要:<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <script src="前端课件/jQuery/jquery-3.3.1.min.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="前端课件/jQuery/jquery-3.3.1.min.js"></script>
    <style type="text/css">
       *{margin:0px;padding: 0px}
       .main{width: 500px;height: 40px;background-color: red;margin:20px auto;box-shadow: 0px 0px 20px red;border-radius: 4px;position: relative;}
       .main ul{list-style: none;z-index: 20px;position: relative;font-size: 17px;}
       .main li{width: 100px; line-height: 40px;float: left;  cursor: pointer;text-align: center;color: white;font-weight: bold;}
       .bottom_line{z-index: 10px;width: 100px;height: 2px;background-color: #fff;position: absolute;top: 38px;}
    </style>
    <script type="text/javascript">
        $(function(){
       //第一种
            // $('.bt1').mouseover(function(){
         //        $('.bottom_line').css('left','0px')
            // })
            // $('.bt2').mouseover(function(){
         //        $('.bottom_line').css('left','100px')
            // })
            // $('.bt3').mouseover(function(){
         //        $('.bottom_line').css('left','200px')
            // })
            // $('.bt4').mouseover(function(){
         //        $('.bottom_line').css('left','300px')
            // })
            // $('.bt5').mouseover(function(){
         //        $('.bottom_line').css('left','400px')
            // })
       //第二种
            // $('.bt1').mouseover(function(){
         //        $('.bottom_line').animate({left:'0px'},500)
            // })
            // $('.bt2').mouseover(function(){
         //        $('.bottom_line').animate({left:'100px'},500)
            // })
            // $('.bt3').mouseover(function(){
         //        $('.bottom_line').animate({left:'200px'},500)
            // })
            // $('.bt4').mouseover(function(){
         //        $('.bottom_line').animate({left:'300px'},500)
            // })
            // $('.bt5').mouseover(function(){
         //        $('.bottom_line').animate({left:'400px'},500)
            // })
         //教程中方法
             $('li').hover(
                function(){
                $x=parseInt($(this).attr('name'))*100
                $('.bottom_line').stop().animate({left:$x+'px'},300)
            },
                function(){
                $('.bottom_line').stop().animate({left:'0px'},300)
            })

         })

    </script>
</head>
<body>
    <div class="main">
        <ul>
<!--         <li class="bt1">公司简介</li>
            <li class="bt2">产品介绍</li>
            <li class="bt3">公司荣誉</li>
            <li class="bt4">产品技术</li>
            <li class="bt5">联系我们</li> -->
            <li name="0">公司简介</li>
            <li name="1">产品介绍</li>
            <li name="2">公司荣誉</li>
            <li name="3">产品技术</li>
            <li name="4">联系我们</li>
        </ul>
        <div class="bottom_line" ></div>
    </div>
</body>
</html>

自己写了两种方法,但效果还是老师写的比较好,代码量少,效果好,还是要打好基础,不能学了新的,忘了旧的,基础很重要。

批改老师:灭绝师太批改时间:2018-11-11 09:24:12
老师总结:能自己测试,寻找方法,是很好的事情,后面会越来越好

发布手记

热门词条