JS实现的模仿QQ头像资料卡显示与隐藏效果

本文实例讲述了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);
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JS # 模仿 # QQ头像 # 资料卡 # 显示 # 隐藏 # 原生JS仿QQ阅读点击展开、收起效果 # JS实现的仿QQ空间图片弹出效果代码 # js实现仿qq消息的弹出窗效果 # JS实现超简单的仿QQ折叠菜单效果 # JS实现仿QQ面板的手风琴效果折叠菜单代码 # js实现带缓冲效果的仿QQ面板折叠菜单代码 # JS实现仿QQ聊天窗口抖动特效 # 纯js实现仿QQ邮箱弹出确认框 # 基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解 # javascript仿qq界面的折叠菜单实现代码 # js设置控件的隐藏与显示的两种方法 # js菜单点击显示或隐藏效果的简单实例 # javascript 控制 html元素显示/隐藏实现代码 # 鼠标 # 遍历 # 适用于 # 移出 # 相关内容 # 多个 # 可以用 # 感兴趣 # 能在 # 数据结构 # 给大家 # 当我们 # 更多关于 # 所述 # 绑定 # 第二种 # 第一种 # 写好 # 程序设计 # 当鼠标

返回目录在线咨询

上一篇：Python构建智能自动抠图模型的训练推理实现方式【教学】
下一篇：怎样在python中写汉字

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS实现的模仿QQ头像资料卡显示与隐藏效果

您的项目需求