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