脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS模仿QQ头像资料卡显示与隐藏

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

 更新时间：2017年04月07日 11:57:12   作者：艾米兔  
这篇文章主要介绍了JS实现的模仿QQ头像资料卡显示与隐藏效果,涉及javascript鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript实现的MD5算法完整实例

    JavaScript实现的MD5算法完整实例

    这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
    2016-02-02
  • JavaScript随机排序(随即出牌)

    JavaScript随机排序(随即出牌)

    JavaScript随机排序，自动抽取中文与英文字母，重新组合并随机排序，生成随机数很可以。
    2010-09-09
  • JS或jQuery获取ASP.NET服务器控件ID的方法

    JS或jQuery获取ASP.NET服务器控件ID的方法

    这篇文章主要介绍了JS或jQuery获取ASP.NET服务器控件ID的方法,本文介绍一方法,解决如何使用js获取ASP.NET控件在浏览器端生成html标签对应的id,需要的朋友可以参考下
    2015-06-06
  • JS动画效果代码2

    JS动画效果代码2

    用js实现的图片生成效果代码，学习js的朋友可以看看
    2008-04-04
  • JavaScript跨域方法汇总

    JavaScript跨域方法汇总

    这篇文章主要介绍了JavaScript跨域方法汇总,本文总结了12种JavaScript的跨域方法,需要的朋友可以参考下
    2014-10-10
  • javascript中setTimeout使用指南

    javascript中setTimeout使用指南

    本文给大家通过3个方法向大家展示了javascript中的setTimeout的使用，非常的简单，有需要的小伙伴可以参考下。
    2015-07-07
  • 详解javascript事件冒泡

    详解javascript事件冒泡

    这篇文章主要向大家介绍了javascript事件冒泡，以及javascript阻止事件冒泡的实现代码，感兴趣的朋友可以参考一下
    2016-01-01
  • 前端BOM操作常用命令详解及代码案例

    前端BOM操作常用命令详解及代码案例

    浏览器对象模型(BOM)是浏览器提供的JavaScript操作浏览器的API,提供了与网页无关的浏览器功能对象,这篇文章主要给大家介绍了关于前端BOM操作常用命令详解及代码案例的相关资料,需要的朋友可以参考下
    2024-10-10
  • 使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

    使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

    由于微信小程序没有提供类似 Image 这样的 JS 对象，要实现图片的预加载要麻烦一些，wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能,需要的朋友可以参考下
    2018-10-10
  • js简单实现竖向tab选项卡的方法

    js简单实现竖向tab选项卡的方法

    这篇文章主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05

最新评论