JS基础17-网站效果

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

要实现的效果

window.onload=function(){
//获取到div框里的li数组
    var oToplist=document.getElementById('top-list');
    var oToplistli=oToplist.getElementsByTagName('li');
    var oPull=document.getElementById('pull-down');
    //鼠标移入时，二级菜单显示，移出时二级菜单消失
    oPull.onmouseover=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号不会恢复到原来的颜色。