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

funnyok發表於2021-09-09
jQuery


html程式碼：

        <div id="Tz_banner">            <ul>                <li class="firstLi">手機 電話卡                    <div class="info">                        <ul>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/1.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a                             class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/2.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/3.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/4.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/5.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/6.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/7.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/8.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/9.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/10.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/11.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a  class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/12.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/13.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/16.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/14.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a class="buy" href="#">選購</a></li>                            <li><a class="title" href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/3137/viewspace-2817101/，如需轉載，請註明出處，否則將追究法律責任。

相關文章