前端 ---小米導航案例

來源:互聯網
上載者:User

標籤:fun   滑鼠   jquery   內容   down   auto   hidden   use   tom   

 

代碼如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{            padding: 0;            margin: 0;        }        ul {            list-style: none;        }        .box{            width: 960px;            /*height: 60px;*/            overflow: hidden;            margin: 0 auto;            /*border: 1px solid green;*/        }        .box ul li{            float: left;            /*width: 160px;*/            /*height: 60px;*/            line-height: 60px;            text-align: center;        }        .box ul li a{            text-decoration: none;            display: block;            width: 40px;            height: 60px;            color: #000;            padding: 0 60px;            background-color: yellow;        }        .box .show{            width: 100%;            height: 200px;            position: absolute;            /**/            top: 60px;            left: 0;            border-top: 1px solid #666;            border-bottom: 1px solid #666;            border-left: 1px solid #666;            border-right: 1px solid #666;            display: none;            box-shadow: 0 0 5px #777;        }        .box .show.active{            display: block;        }    </style></head><body><div class="box">    <ul>        <li>            <a href=" ">小米手機</a >            <div class="show">                <div class="container">張三                </div>            </div>        </li>        <li>            <a href="#">小米手機</a >            <div class="show">                <div class="container">李四                </div>            </div>        </li>        <li>            <a href="#">小米手機</a >            <div class="show">                <div class="container">王五                </div>            </div>        </li>        <li>            <a href="#">小米手機</a >            <div class="show">                <div class="container">趙六                </div>            </div>        </li>         <li>            <a href="#">小米手機</a >            <div class="show">                <div class="container">武七                </div>            </div>        </li>         <li>            <a href="#">小米手機</a >            <div class="show">                <div class="container">哈哈哈哈                </div>            </div>        </li></div>        <script type="text/javascript" src=‘jquery-3.3.1.js‘></script>        <script type="text/javascript">    $(function(){        // 控制當滑鼠第一次呼入的動畫效果          var animated = false;                $(‘.box>ul>li>a‘).mouseenter(function(ev){            // 下面代碼時滑鼠第一次滑入a標籤的動畫效果            if(!animated){                animated = true;                var jQa = $(this);                            jQa.css(‘color‘,‘#F52809‘)                // next()表示當前標籤的緊挨著的兄弟標籤                $(this).next("div").stop().slideDown(600);            }else{                 var jQa = $(this);                        // 修改a標籤的樣式                  jQa.css(‘color‘,‘#F52809‘).parent(‘li‘).siblings(‘li‘).children(‘a‘).css(‘color‘,‘black‘);                  // 切換下面顯示地區的內容                  jQa.next(‘div‘).stop().show().parents(‘li‘).siblings(‘li‘).children(‘.show‘).stop().hide();            }                       });        // 滑鼠進入到下方地區,保持不變          $(‘.show‘).mouseenter(function(ev){                                    $(this).stop().show();        })          // 滑鼠離開下方地區           $(‘.show‘).mouseleave(function(ev){                                    $(this).stop().slideUp(300);            animated = false        })           // 滑鼠離開導覽列列表        $(‘.box‘).mouseleave(function(ev){                       console.log($(ev.target));            $(ev.target).next("div").stop().slideUp(300);            animated = false;               });          })  </script></body> </html>

前端 ---小米導航案例

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.