用jquery插件寫一個小米官網左側二級菜單
阿新 • • 發佈：2018-03-16
前端 源碼 jquery javascript 插件 
知識點：靜態布局思路，jquery動態布局，代碼格式規範，jquery插件調用， 鼠標滑動二級菜單構建。
知識點：靜態布局思路，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插件寫一個小米官網左側二級菜單