基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)


Posted in Javascript onJune 09, 2016

一、应用场景

鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口。比如:

鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示:

基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

hover时显示二维码

基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

二、实现

用如下这样一个简单的效果:鼠标hover到A上显示B来模拟

基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

有2种实现方式,推荐第二种,第一种有弊端下面会说。

1、方法一

原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B。这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏。

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover A show B</title>
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style type="text/css">
#hook { float: left; margin: 10px 0 10px 10px; width: 50px; height: 50px; background-color: #ccc; }
#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }
</style>
</head>
<body>
<div id="hoverWrap">
 <div id="hook">A</div>
 <div id="msg-box">功能模块B</div>
</div>
<script type="text/javascript">
$("#hoverWrap").hover(function(){
 $("#msg-box").toggle();
});
</script>
</body>
</html>

基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

这种方法实现起来比较简单,但需包裹一层父标签且有个弊端:两个元素不能有间距。

2、方法二

原理:鼠标经过A时弹出B,鼠标移出A,设置一个计时器延迟0.5s再关闭B,所以鼠标移入A时需判断,如果有计时器则先清除计时器再显示B。

当用户离开触发事件的A后,资料卡div要延时0.5秒才后关闭,用户拥有足够的时间进行相应的操作,当鼠标移入资料卡B,将B中之前正在计时关闭B的计时器关闭。

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover A show B</title>
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style type="text/css">
#hook { float: left; margin: 10px; width: 50px; height: 50px; background-color: #ccc; }
#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }
</style>
</head>
<body>
<div id="hook">A</div>
<div id="msg-box">功能模块B</div>
<script type="text/javascript">
var timer;
$("#hook,#msg-box").bind("mouseover",showMsgBox);
$("#hook").bind("mouseout",hideMsgBox);
$("#msg-box").bind("mouseout",function(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").hide(); 
});
function showMsgBox(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").show();
}
function hideMsgBox(){
 timer=setTimeout(function(){
  $("#msg-box").hide();
 },500);
}
</script>
</body>
</html>

js部分:

<script type="text/javascript">
var timer;
$("#hook,#msg-box").bind("mouseover",showMsgBox);
$("#hook").bind("mouseout",hideMsgBox);
$("#msg-box").bind("mouseout",function(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").hide(); 
});
function showMsgBox(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").show();
}
function hideMsgBox(){
 timer=setTimeout(function(){
  $("#msg-box").hide();
 },500);
}
</script>

注意事项

1、触发事件用mouseover而非mousemove。

mouseover:鼠标移入目标元素上方时触发。

mousemove:鼠标在元素内部移动时不断触发。

所以用mouseover,mousemove耗资源。

更多信息可参考:http://www.cnblogs.com/starof/p/4106904.html

2、 调用timer前先声明

若不声明,则timer在第一次鼠标移出时才会声明,所以第一次鼠标移入时会报错提示timer未声明。

3、调用mouseover事件前必须先清除定时器

若不清除,计时0.5s后会自动关闭B

三、封装成一个通用功能

考虑到这个功能比较通用,所以封装了一下。因为js需要处理一些兼容性问题,所以用jquery来写。

/**
* @Description 鼠标hover到oHook上显示oMsgBox。
* @Author  liuxiaoyan 
* @Date  2016-03-24 15:01:13
* @Last Modified by: liuxiaoyan
* @Last Modified time: 2016-03-24 15:01:13
*/
/**
* @param oHook:要hover上去的元素
* @param oMsgBox:hover上去要显示的元素
* 调用示例:hoverShowMsg.init({hook:$(".viewPhone"),msgBox:$(".viewPhonescan")});
*/
var hoverShowMsg=(function(){
 var oHook,
  oMsgBox,
  timer;
 function init(o){
  oHook=o.hook;
  oMsgBox=o.msgBox;
  bindEvent();
 }
 function bindEvent(){
  oHook.bind({
   mouseover:showMsgBox,
   mouseout:hideMsgBox
  });
  oMsgBox.bind({
   mouseover:showMsgBox,
   mouseout:function(){
   if(timer){clearTimeout(timer);}
   oMsgBox.hide();
  }
  });
 }
 function hideMsgBox(){
  timer=setTimeout(function(){
   oMsgBox.hide();
  },500);
 }
 function showMsgBox(){
  if(timer){clearTimeout(timer);}
  oMsgBox.show();
 }
 return{init:init};
})();

以上所述是小编给大家介绍的基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)的全部内容,希望对大家有所帮助,如果大家有疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
js登录弹出层特效
Mar 07 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 #Javascript
Node.js中npm常用命令大全
Jun 09 #Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 #Javascript
Active控件问题小结(附解决办法)
Jun 09 #Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 #Javascript
JavaScript的instanceof运算符学习教程
Jun 08 #Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Python是什么 Python的用处
2020/05/26 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
中学生学雷锋演讲稿
2014/04/26 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
教师年度个人总结
2015/02/11 职场文书
校本研修个人总结
2015/02/28 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
实用求职信模板范文
2019/05/13 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android