摘要:在實現博客前端頁面一和實現博客前端頁面二中已經實現了對獲取元素和樣式相關的方法的封裝,本文將實現下拉菜單組件封裝。
在JS實現博客前端頁面(一) 和JS實現博客前端頁面(二)中已經實現了對獲取DOM元素和CSS樣式相關的方法的封裝,本文將實現下拉菜單組件封裝。
下拉菜單 界面設計創建一個頂部header區域,放入“logo圖片”和“個人中心”,鼠標滑過“個人中心”時,會顯示下拉菜單,鼠標移出時會隱藏,對于下拉菜單的每一項,鼠標劃過有背景樣式的切換。
設置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%;
}
設置效果
在base.js中繼續封裝show()方法,用于設置顯示元素
</>復制代碼
//設置顯示
Base.prototype.show = function(){
for (var i=0;i
在base.js中繼續封裝hide()方法,用于設置隱藏元素
</>復制代碼
//設置顯示
Base.prototype.hide= function(){
for (var i=0;i
在base.js中繼續封裝hover()方法,用于設置鼠標移入移出事件
</>復制代碼
//設置鼠標移入移入移出
Base.prototype.hover = function(over,out){//over為移入事件,out為移出事件
for (var i=0;i
前臺調用
</>復制代碼
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();
});
}
</>復制代碼
以上內容來自李炎恢老師JavaScript課程實戰篇筆記整理
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/90953.html
摘要:大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準,顧名思義,即的體驗方式,我們可以戴著頭顯享受沉浸式的網頁,新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么 去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準,顧名思義,WebVR 即 web + VR 的體驗方式,我們可以戴著頭顯享受沉浸式的網頁,新的 API 標準讓我們可以使用 ...
摘要:有二維碼掃描功能,還做了類似消息可拖拽效果,上拉下拉刷新,輪播圖組件。特別適合用于基于模式的移動應用程序開發。簡介是一個用基于,和的,創建移動跨平臺移動應用程序的快速開發平臺。 這個項目做得比較早,當時是基于ionic1和angular1做的。做了四個tabs的app,首頁模仿攜程首頁,第二頁主要是phonegap調用手機核心功能,第三頁模仿微信和qq聊天頁,第四頁模仿一般手機的表單設...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 1319·2021-09-27 13:56
閱讀 2352·2019-08-26 10:35
閱讀 3512·2019-08-23 15:53
閱讀 1860·2019-08-23 14:42
閱讀 1244·2019-08-23 14:33
閱讀 3574·2019-08-23 12:36
閱讀 1958·2019-08-22 18:46
閱讀 1008·2019-08-22 14:06
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要