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;//獲得左側(cè)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();
相關(guān)文章
微信小程序?qū)崿F(xiàn)點擊圖片旋轉(zhuǎn)180度并且彈出下拉列表
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊圖片旋轉(zhuǎn)180度并且彈出下拉列表,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11layui-table獲得當(dāng)前行的上/下一行數(shù)據(jù)的例子
今天小編就為大家分享一篇layui-table獲得當(dāng)前行的上/下一行數(shù)據(jù)的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實現(xiàn)利用閉包判斷Dom元素和滾動條的方向示例
這篇文章主要介紹了JS實現(xiàn)利用閉包判斷Dom元素和滾動條的方向,涉及javascript閉包、事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-08-08uniapp使用百度地圖的保姆式教學(xué)(適合初學(xué)者!)
公司項目中有地圖展示和定位功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用百度地圖的保姆式教學(xué),文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03