用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/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 適合移動手機的jQuery多級側邊欄選單外掛jQuery
- jQuery簡單實用的響應式固定側邊欄外掛jQuery
- jQuery固定側邊欄外掛ssMenujQuerySSM
- jQuery與CSS二級下拉選單jQueryCSS
- 編寫一個簡單的babel外掛Babel
- 左側導航click，右側內容scroll——一個模擬外賣點單的簡易頁面
- 一個簡單的以視訊作為網頁背景的jQuery 外掛網頁jQuery
- 手寫jquery.cookie外掛jQueryCookie
- 電商左側商品分類選單實現
- OT部分頁面左側選單不顯示
- 製作一個超簡單的全屏外掛(基於JQuery)jQuery
- adminLTE 點選左側選單導航連結跳轉整個頁面會重新整理，左側的選單又會摺疊起來，如何不擇疊？
- [提問交流]切換頁面，左側選單消失
- vue 動態載入路由，渲染左側選單欄Vue路由
- jquery寫的ajax分頁外掛jQuery
- 自己寫一個Babel外掛Babel
- 用Python爬取WordPress官網所有外掛Python
- jQuery 緩衝效果二級導航下拉選單jQuery
- 用Kotlin擼一個圖片壓縮外掛-外掛基礎篇(二)Kotlin
- vscode外掛編寫體驗-右鍵選單VSCode
- 如何寫一個Vue的外掛Vue
- jQuery和css3垂直手風琴摺疊選單外掛jQueryCSSS3
- 非常全面的jquery 外掛網站jQuery網站
- 讓web擁有原生手機側滑選單那種順滑外掛Web
- 自己寫一個vue的loading外掛Vue
- 給Ionic寫一個cordova(PhoneGap)外掛
- [提問交流]後臺新增自定義選單左側不顯示子選單的進
- 如何編寫 ProtoBuf 外掛 (二) ？
- markdown-it 外掛如何寫（二）
- 自己動手編寫一個Mybatis外掛：Mybatis脫敏外掛MyBatis
- 手把手教你開發jquery外掛（二）jQuery
- 實現dcat-admin的雙選單風格( 頂部+左側)
- vue-element-admin左側選單欄隱藏功能去除修改Vue
- 大前端工程化之寫一個簡單的webpack外掛前端Web
- jQuery和css3全屏彈出式導航選單特效外掛jQueryCSSS3特效
- 分享一下解決Dcat Admin左側選單不重新整理的問題
- 用jQuery手寫一個小遊戲jQuery遊戲
- JQuery模板外掛-jquery.tmpljQuery