亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

JQuery使用其自定義動(dòng)畫制作跟隨導(dǎo)航效果

原創(chuàng) 2018-12-02 23:10:07 192
摘要:<!DOCTYPE html><html> <head>  <title>下滑線跟隨導(dǎo)航</title>  <meta charset="utf-8"/>  <script type="text/javascript" src="j

<!DOCTYPE html>

<html>

 <head>

  <title>下滑線跟隨導(dǎo)航</title>

  <meta charset="utf-8"/>

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

    <style type="text/css">

  *{padding:0;margin:0;}

  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;}

  .menu{width:500px;position:relative;margin:20px auto;height:32px;box-shadow: 0 2px 20px #000;background: #AF3434;border-radius:3px }

  </style>

         <script type="text/javascript">

                $(function(){

                $('li').hover(

                function(){

                $x=parseInt($(this).attr('name'))*100

                $('.block').stop().animate({left:$x+'px'},100)

                },

                function(){

                $('.block').stop().animate({left:'0px'},500)

                }

                )

                })



         </script>

    </head>

    <body>

         <div class="menu">

              <ul>

                 <li name="0">首頁(yè)</li>

                 <li name="1">php學(xué)習(xí)</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>

               </div>

            </div>

    </body>

</html>


批改老師:滅絕師太批改時(shí)間:2018-12-03 09:36:56
老師總結(jié):js控制,只要條理清楚就很簡(jiǎn)單,完成的不錯(cuò)!

發(fā)佈手記

熱門詞條