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


Posted in Javascript onApril 07, 2017

本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考,具体如下:

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

实质就是延时提示框问题!

JS实现的模仿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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript中获取选中对象的类型
Apr 02 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
Element MessageBox弹框的具体使用
Jul 27 Javascript
socket.io实现在线群聊功能
Apr 07 #Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 #Javascript
微信小程序实现图片轮播及文件上传
Apr 07 #Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 #Javascript
JS仿Base.js实现的继承示例
Apr 07 #Javascript
vue-hook-form使用详解
Apr 07 #Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
You might like
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python中is和==的区别详解
2018/11/15 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
大学自主招生自荐信范文
2014/02/26 职场文书
委托书怎样写
2014/08/30 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
幼儿园辞职书
2015/02/26 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
财务人员入职担保书
2015/09/22 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书