JS實(shí)現(xiàn)類似百葉窗下拉菜單效果
更新時(shí)間：2016年12月30日 17:04:44 作者：Ag_wenbi
百葉窗下拉菜單效果非常棒，今天小編給大家分享一段js代碼實(shí)現(xiàn)類似百葉窗下拉菜單效果，需要的朋友參考下
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
function leftmove(){
var oLeft_ul=document.getElementById('left_ul');
var aLeft_li=oLeft_ul.children;//獲得左側(cè)ul下的第一個(gè)子集li
var aleft_ul_hidden=oLeft_ul.getElementsByTagName('ul');
var aleft_span_hidden=oLeft_ul.getElementsByTagName('span');
var arr=[];
var span_arr=[];
getclassname(aleft_ul_hidden,'cl_hidden',arr)
getclassname(aleft_span_hidden,'sj',span_arr);
for(var i=0;i<aLeft_li.length;i++){
aLeft_li[i].index=i;
aLeft_li[i].onmouseenter=function(){
for(var j=0;j<aLeft_li.length;j++){
move(aLeft_li[j],{height:40});
span_arr[j].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
span_arr[j].style.top='13px';
span_arr[j].style.left='8px';
}
var ul_height=arr[this.index].children.length*40
move(aLeft_li[this.index],{height:40+ul_height});
span_arr[this.index].style.borderColor='#666 #0ad #0ad #0ad';
span_arr[this.index].style.top='17px';
span_arr[this.index].style.left='6px';
};
aLeft_li[i].onmouseleave=function(){
for(var j=0;j<aLeft_li.length;j++){
move(aLeft_li[j],{height:40});
span_arr[j].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
span_arr[j].style.top='13px';
span_arr[j].style.left='8px';
}
};
arr[i].onmouseover=function(){
for(var i=0;i<arr.length;i++){
span_arr[i].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
span_arr[i].style.top='13px';
span_arr[i].style.left='8px';
}
span_arr[this.parentNode.index].style.borderColor='#666 #f2f2f2 #f2f2f2 #f2f2f2';
span_arr[this.parentNode.index].style.top='17px';
span_arr[this.parentNode.index].style.left='6px';
};
arr[i].onmouseout=function(){
for(var i=0;i<arr.length;i++){
span_arr[i].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
span_arr[i].style.top='13px';
span_arr[i].style.left='8px';
}
span_arr[this.parentNode.index].style.borderColor='#666 #0ad #0ad #0ad';
span_arr[this.parentNode.index].style.top='17px';
span_arr[this.parentNode.index].style.left='6px';
};
}
}
leftmove();
相關(guān)文章
JS實(shí)現(xiàn)自動(dòng)變化的導(dǎo)航菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)自動(dòng)變化的導(dǎo)航菜單效果代碼,涉及JavaScript基于定時(shí)函數(shù)觸發(fā)頁面元素屬性動(dòng)態(tài)變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片旋轉(zhuǎn)180度并且彈出下拉列表
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片旋轉(zhuǎn)180度并且彈出下拉列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JS實(shí)現(xiàn)進(jìn)入頁面時(shí)漸變背景色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)進(jìn)入頁面時(shí)漸變背景色的方法,涉及javascript操作css控制背景色漸變的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
layui-table獲得當(dāng)前行的上/下一行數(shù)據(jù)的例子
今天小編就為大家分享一篇layui-table獲得當(dāng)前行的上/下一行數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS實(shí)現(xiàn)利用閉包判斷Dom元素和滾動(dòng)條的方向示例
這篇文章主要介紹了JS實(shí)現(xiàn)利用閉包判斷Dom元素和滾動(dòng)條的方向,涉及javascript閉包、事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-08-08
微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)
這篇文章主要介紹了詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
JavaScript兩種計(jì)時(shí)器的實(shí)例講解
今天小編就為大家分享一篇關(guān)于JavaScript兩種計(jì)時(shí)器的實(shí)例講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
uniapp使用百度地圖的保姆式教學(xué)(適合初學(xué)者!)
公司項(xiàng)目中有地圖展示和定位功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用百度地圖的保姆式教學(xué),文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
從層次上來看，對(duì)象的復(fù)制可以簡(jiǎn)單地分為淺復(fù)制和深復(fù)制，顧名思義，淺復(fù)制是指只復(fù)制一層對(duì)象的屬性，不會(huì)復(fù)制對(duì)象中的對(duì)象的屬性，對(duì)象的深復(fù)制會(huì)復(fù)制對(duì)象中層層嵌套的對(duì)象的屬性。本文是我在復(fù)制對(duì)象方面的一些心得總結(jié)，由淺復(fù)制到深復(fù)制，感興趣的朋友一起學(xué)習(xí)吧2017-03-03