JS实现类似百叶窗下拉菜单效果
程序员文章站
2023-08-28 08:46:13
废话不多说了,直接给大家贴代码了,具体代码如下所示:
function leftmove(){
var oleft_ul=document.geteleme...
废话不多说了,直接给大家贴代码了,具体代码如下所示:
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();
上一篇: CAD怎么做一个六角镶花的图形?
下一篇: 晋楚争霸发生于哪一年?简介其结果及评价