JS基础17-网站效果

一、鼠标移入触发显示框和更改属性

要实现的效果

window.οnlοad=function(){
//获取到div框里的li数组var oToplist=document.getElementById('top-list');var oToplistli=oToplist.getElementsByTagName('li');var oPull=document.getElementById('pull-down');//鼠标移入时，二级菜单显示，移出时二级菜单消失oPull.οnmοuseοver=function(){this.style.display='block';};oPull.onmouseout=function(){this.style.display='none';};
//移入时更改li的属性for(var i=0;i<oToplistli.length;i++){if(i!==2){oToplistli[i].onmouseover=function(){this.style.borderTop='3px solid #fff';    };}
//判断鼠标只有移入到第三个li时才显示二级菜单，不然只要鼠标移入li，不论哪个li都会显示二级菜单else if(i==2){oToplistli[i].onmouseover=function(){this.style.borderTop='3px solid #fff';    oPull.style.display='block';    };
}

二、鼠标移入时触发更改div的效果，并同时进行重置来防止全部改变而不是移入到的那个

要实现的效果：

//获取到div数组
var oShopbtn=document.getElementsByClassName('shop-btn-a');
var oDivShoplist=document.getElementsByClassName('shop-list');
//先遍历数组，获取到每个数组元素for(var i=0;i<oShopbtn.length;i++){oShopbtn[i].index=i;oShopbtn[i].onmouseover=function(){
//进行重置，每次触发时先全部清空效果for(var i=0;i<oShopbtn.length;i++){oDivShoplist[i].style.display="none";oShopbtn[i].style.backgroundColor='';}
//然后更改当前触发的这个数组下标为i的元素的属性，让当前这个div显示出来oDivShoplist[this.index].style.display='block';this.style.backgroundColor="#fff";};};

如果不进行重置的话，当鼠标每次移入下方小方块时会变白色，当移到第一个时，1号变白，移到2号2号也变白而1号不会恢复到原来的颜色。