用jquery外掛程式寫一個小米官網左側二級菜單

標籤：前端   源碼   jquery   javascript   外掛程式   

知識點：靜態布局思路，jquery動態布局，代碼格式規範，jquery外掛程式調用， 滑鼠滑動二級菜單構建。

html代碼：

        <div id="Tz_banner">            <ul>                <li class="firstLi">手機 電話卡                    <div class="info">                        <ul>                            <li><a class="title" href="#"><img src="images/1/1.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a                             class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/2.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/3.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/4.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/5.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/6.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/7.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/8.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/9.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/10.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/11.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/12.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/13.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/16.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/14.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                        </ul>                    </div>                </li>                <li class="firstLi">筆記本 平板                    <div class="info">                        <ul>                            <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                        </ul>                    </div>                </li>                <li class="firstLi">電視 盒子                </li>                <li class="firstLi">路由器                </li>                <li class="firstLi">手機 電話卡                </li>                <li class="firstLi">筆記本 平板                </li>                <li class="firstLi">電視 盒子                </li>                <li class="firstLi">手機 電話卡                </li>                <li class="firstLi">電視 盒子                </li>                <li class="firstLi">耳機                </li>            </ul>        </div>

css代碼：

    <style type="text/css">    /*CSS層疊樣式列表  美化 工廠*/    *{margin:0px;padding:0px;     font-family:"微軟雅黑";}/*萬用字元 1.統一所有元素的預設樣式 2.不同瀏覽器之間的相容性問題*/    li{list-style:none;/*去列表圓點*/}    body{background:#434343;}    a{text-decoration:none;/*去底線*/}    #Tz_banner{        width:237px;/*px 像素  寬度*/        height:458px;/*高*/        background:#333;/*背景*/        margin:130px 0px 0px 54px;/* 上 右 下 左 順時針*/        position:relative;/*相對定位 參照物*/    }    #Tz_banner .firstLi{        width:237px;        height:42px;        cursor:pointer;/*滑鼠樣式*/        font-size:14px;/*字型大小*/        text-indent:20px;/*首行縮排*/        line-height:42px;/*行高*/        color:#fff;/*字型顏色*/    }    #Tz_banner .firstLi:hover{background:#ff9900;}/*滑鼠划過後的樣式*/    #Tz_banner .firstLi .info{        height:458px;        background:#fff;        padding-left:10px;        position:absolute;/*絕對位置 改變位置的盒子*/        left:237px;        top:0px;        display:none;    }    #Tz_banner .firstLi .info li{        width:248px;        height:77px;        text-indent:0px;        margin-right:15px;        position:absolute;    }    #Tz_banner .firstLi .info li a.title{        height:77px;        display:block;/*變成區塊層級元素*/        float:left;        line-height:77px;        left:0px;        top:0px;    }    #Tz_banner .firstLi .info li a.title img{        margin:16.5px 15px 0px 15px;        float:left;    }    #Tz_banner .firstLi .info li a.title span{        float:left;        height:77px;        line-height:77px;color:#222;    }    #Tz_banner .firstLi .info li a.buy{        width:60px;        display:block;        float:right;        margin-top:25px;        border:1px solid #f60;/*邊框 粗細 樣式 顏色*/        line-height:24px;        text-align:center;/*文字置中*/        color:#f60;    }    #Tz_banner .firstLi .info li a.buy:hover{        background:#f60;        color:#fff;    }    </style>

javascript代碼：

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>    <script type="text/javascript">    $("#Tz_banner .firstLi .info").each(function(){        var $li = $(this).find("li");//擷取到所有info下面的li        var length =$li.length;//得到info下面所有li的數量        var width = $li.width();//擷取li的寬度        var height = $li.height();//擷取li的高度        var col = Math.ceil(length/6);//向上取整        $(this).width(col*width);        $li.each(function(i){            var x = Math.floor(i/6);//向下取整            var y = i%6;//取餘數            $(this).css({                left:x*width + "px",                top:y*height + "px"            });        });    });    $("#Tz_banner .firstLi").hover(function(){        $(this).find(".info").show();    },function(){        $(this).find(".info").hide();    });    </script>

用jquery外掛程式寫一個小米官網左側二級菜單