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 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
YII框架关联查询操作示例
2019/04/29 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
深入理解js promise chain
2016/05/05 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python银行系统实战源码
2019/10/25 Python
python绘制彩虹图
2019/12/16 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
争论的故事教学反思
2014/02/06 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python