JS实现类似百叶窗下拉菜单效果
更新时间:2016年12月30日 17:04:44 作者:Ag_wenbi
百叶窗下拉菜单效果非常棒,今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果,需要的朋友参考下
废话不多说了,直接给大家贴代码了,具体代码如下所示:
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();
相关文章
JSON与String互转的实现方法(Javascript)
下面小编就为大家带来一篇JSON与String互转的实现方法(Javascript) 。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦2016-09-09JavaScript中this的9种应用场景及三种复合应用场景
本文通过9中应用场景给大家分析this关键字的用法,需要了解的朋友可以参考下本文2015-09-09
最新评论