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

NO IMAGE

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

知識點:靜態佈局思路,jquery動態佈局,程式碼格式規範,jquery外掛呼叫, 滑鼠滑動二級選單構建。

<!doctype html><!--宣告html版本編寫指令 H5-->
<html><!--根目錄標籤-->
<head>
<!--宣告頁面編碼 uft-8 國際編碼-->
<metacharset="UTF-8">
<!--網站三要素 關鍵字 頁面描述 標題 SEO-->
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>小米導航</title>
<styletype="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:130px0px 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.5px15px 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:1pxsolid #f60;/*邊框 粗細 樣式 顏色*/
line-height:24px;
text-align:center;/*文字居中*/
color:#f60;
}
#Tz_banner .firstLi .info li a.buy:hover{
background:#f60;
color:#fff;
}
</style>
</head>
<body>
<divid="Tz_banner">
<ul>
<liclass="firstLi">手機 電話卡
<divclass="info">
<ul>
<li><aclass="title"href="#"><imgsrc="images/1/1.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><a
class="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/2.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/3.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/4.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/5.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/6.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/7.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/8.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/9.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/10.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/11.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/12.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/13.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/16.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/14.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
</ul>
</div>
</li>
<liclass="firstLi">筆記本 平板
<divclass="info">
<ul>
<li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
<li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--沒有任何意義的行內元素--></a><!--超連結--><aclass="buy"href="#">選購</a></li>
</ul>
</div>
</li>
<liclass="firstLi">電視 盒子
</li>
<liclass="firstLi">路由器
</li>
<liclass="firstLi">手機 電話卡
</li>
<liclass="firstLi">筆記本 平板
</li>
<liclass="firstLi">電視 盒子
</li>
<liclass="firstLi">手機 電話卡
</li>
<liclass="firstLi">電視 盒子
</li>
<liclass="firstLi">耳機
</li>
</ul>
</div>
</body>
<scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>
<scripttype="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>
</html>

web前端學習群:575308719,分享原始碼、視訊、企業級案例、最新知識點,歡迎初學者和在進階中的小夥伴。

關注公眾號→‘學習web前端’跟大佬一起學前端!