js模仿QQ头像资料卡显示与隐藏

我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当鼠标移出头像或资料卡时,资料卡延时隐藏。
实质就是延时提示框问题!

这里写图片描述

首先写好布局:

<style>
        div { float:left; margin:5px; }
        .head { width:50px;height:50px;background-color:pink; }
        .info { width:250px;height:200px;background-color:blue;display:none;  }
</style>
<div>
    <div class="head"></div>
    <div class="info"></div>
</div>

其次js部分:
思路:
(1)鼠标移入头像,资料卡显示;鼠标移出头像,资料卡延时隐藏setTimeout
(2)鼠标移入资料卡,资料卡仍显示,并清除资料卡延时隐藏的变量
(3)鼠标移出资料卡,资料卡延时隐藏,并且此时如果在移入到头像中,资料卡扔显示,并清除资料卡延时隐藏的变量

window.onload =function(){
        var oHead = document.getElementsByClassName("head")[0];
        var oInfo = document.getElementsByClassName("info")[0];
        var timer = null;
        oHead.onmouseover=function(){
            clearTimeout(timer);
            oInfo.style.display="block";
        };
        oHead.onmouseout=function(){
            timer = setTimeout(function(){
                oInfo.style.display="none";
            },500); 
        };
        oInfo.onmouseover=function(){
            clearTimeout(timer);
            oInfo.style.display="block";
        };
        oInfo.onmouseout=function(){
            timer = setTimeout(function(){
                oInfo.style.display="none";
            },500); 
        };
};

优化代码:

oInfo.onmouseover = oHead.onmouseover=function(){
            clearTimeout(timer);
            oInfo.style.display="block";
        };
 oInfo.onmouseout = oHead.onmouseout=function(){
            timer = setTimeout(function(){
                oInfo.style.display="none";
            },500); 
        };

函数封装:
注意:事件 .xx 等于 [“xx”]
第一种:函数外获取变量,调用函数,适用于一个或两个元素调用此事件

window.onload =function(){
        var oHead = document.getElementsByClassName("head")[0];
        var oInfo = document.getElementsByClassName("info")[0];
        reminder(oHead,oInfo,"onmouseover","onmouseout");
function reminder (div1,div2,event1,event2){var timer = null; 
        div1[event1] = div2[event1]=function(){
            clearTimeout(timer);
            div2.style.display="block";
        };
        div1[event2] = div2[event2]=function(){
            timer = setTimeout(function(){
                div2.style.display="none";
            },500); 
        };
        }
    };

第二种:函数外获取变量,调用函数,适用于多个元素调用此事件

window.onload =function(){      
        var number=0;
        reminder("head","info","onmouseover","onmouseout",number);

        function reminder (div1,div2,event1,event2,num){
        var oHead = document.getElementsByClassName(div1)[num];
        var oInfo = document.getElementsByClassName(div2)[num];
        var timer = null; 
        oHead[event1] = oInfo[event1]=function(){
            clearTimeout(timer);
            oInfo.style.display="block";
        };
        oHead[event2] = oInfo[event2]=function(){
            timer = setTimeout(function(){
                oInfo.style.display="none";
            },500); 
        };
        }
    };

比如,一共有三个头像的话,就可以用for循环遍历为每个元素绑定事件:

var number=null;
for(number=0;number<3;number++){
             reminder("head","info","onmouseover","onmouseout",number);
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值