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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
js编写选项卡效果
May 23 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 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
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
用PHP实现图象锐化代码
2007/06/14 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php中JSON的使用方法
2015/04/30 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
node.js的事件机制
2017/02/08 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
学python爬虫能做什么
2020/07/29 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
环保专业大学生职业规划设计
2014/01/10 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
给老婆道歉的话
2015/01/20 职场文书
员工工作表扬信
2015/05/05 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python