資訊專欄INFORMATION COLUMN
摘要：在實(shí)現(xiàn)博客前端頁面一和實(shí)現(xiàn)博客前端頁面二中已經(jīng)實(shí)現(xiàn)了對獲取元素和樣式相關(guān)的方法的封裝，本文將實(shí)現(xiàn)下拉菜單組件封裝。
在JS實(shí)現(xiàn)博客前端頁面（一） 和JS實(shí)現(xiàn)博客前端頁面（二）中已經(jīng)實(shí)現(xiàn)了對獲取DOM元素和CSS樣式相關(guān)的方法的封裝，本文將實(shí)現(xiàn)下拉菜單組件封裝。
下拉菜單 界面設(shè)計創(chuàng)建一個頂部header區(qū)域，放入“l(fā)ogo圖片”和“個人中心”，鼠標(biāo)滑過“個人中心”時，會顯示下拉菜單，鼠標(biāo)移出時會隱藏，對于下拉菜單的每一項(xiàng)，鼠標(biāo)劃過有背景樣式的切換。
Document
登錄
設(shè)置CSS樣式
body {
margin:0;
padding:0;
background:#fff url(../images/header_bg.png) repeat-x;
font-size:12px;
color:#333;
}
ul {
padding:0;
margin:0;
}
ul li {
list-style-type:none;
}
#header {
width:900px;
height:30px;
margin:0 auto;
}
#header .logo {
width:100px;
height:30px;
float:left;
}
#header .logo img {
display:block;
}
#header .member {
position:relative;
width:70px;
height:30px;
left: 0;
line-height:30px;
float:right;
background:url(../images/arrow.png) no-repeat 55px center;
cursor:pointer;
}
#header .login{
float: right;
width: 35px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
#header ul {
position:absolute;
top:30px;
background:#FBF7E1;
width:100px;
height:120px;
border:1px solid #999;
border-top:none;
padding:10px 0 0 0;
display:none;
}
#header ul li {
height:25px;
line-height:25px;
text-indent:20px;
letter-spacing:1px;
}
#header ul li a {
display:block;
text-decoration:none;
color:#333;
background:url(../images/arrow3.gif) no-repeat 5px 45%;
}
#header ul li a:hover {
background:#fc0 url(../images/arrow4.gif) no-repeat 5px 45%;
}
設(shè)置效果
在base.js中繼續(xù)封裝show()方法，用于設(shè)置顯示元素
//設(shè)置顯示
Base.prototype.show = function(){
for (var i=0;i
在base.js中繼續(xù)封裝hide()方法，用于設(shè)置隱藏元素
//設(shè)置顯示
Base.prototype.hide= function(){
for (var i=0;i
在base.js中繼續(xù)封裝hover()方法，用于設(shè)置鼠標(biāo)移入移出事件
//設(shè)置鼠標(biāo)移入移入移出
Base.prototype.hover = function(over,out){//over為移入事件，out為移出事件
for (var i=0;i
前臺調(diào)用
window.onload = function () {
//個人中心的下拉菜單
$().getClass("member").hover(function () {//傳入over事件
$().getClass("member").css("background", "url(images/arrow2.png) no-repeat 55px center");
$().getClass("member_ul").show();
}, function () {//傳入out事件
$().getClass("member").css("background", "url(images/arrow.png) no-repeat 55px center");
$().getClass("member_ul").hide();
});
}
以上內(nèi)容來自李炎恢老師JavaScript課程實(shí)戰(zhàn)篇筆記整理
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90953.html
摘要：大潮來襲前端開發(fā)能做些什么去年谷歌和火狐針對提出了的標(biāo)準(zhǔn)，顧名思義，即的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的標(biāo)準(zhǔn)讓我們可以使用語言來開發(fā)。 VR 大潮來襲 --- 前端開發(fā)能做些什么 去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標(biāo)準(zhǔn)，顧名思義，WebVR 即 web + VR 的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的 API 標(biāo)準(zhǔn)讓我們可以使用 ...
摘要：有二維碼掃描功能，還做了類似消息可拖拽效果，上拉下拉刷新，輪播圖組件。特別適合用于基于模式的移動應(yīng)用程序開發(fā)。簡介是一個用基于，和的，創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。 這個項(xiàng)目做得比較早，當(dāng)時是基于ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調(diào)用手機(jī)核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機(jī)的表單設(shè)...
摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 1319·2021-09-27 13:56
閱讀 2351·2019-08-26 10:35
閱讀 3511·2019-08-23 15:53
閱讀 1859·2019-08-23 14:42
閱讀 1243·2019-08-23 14:33
閱讀 3572·2019-08-23 12:36
閱讀 1955·2019-08-22 18:46
閱讀 1006·2019-08-22 14:06
