一、应用场景

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

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

  • hover时显示二维码

二、实现

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

有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>

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

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};

})();

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5312195.html有问题欢迎与我讨论，共同进步。

JS实现类似QQ好友头像hover时显示资料卡的效果的更多相关文章

  1. JS实现鼠标经过用户头像显示资料卡的效果，可点击

    基于项目的须要.须要制作出例如以下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料.事实上也就是类似QQclient的那种功能. 网上找了非常多代码,基本都实现了鼠标悬浮之后弹 ...

  2. js实现类似qq表情（插入图片以及获取光标的效果）

    <!doctype html><html style="height:100%"><head><meta charset="ut ...

  3. android开发之ExpandableListView的使用，实现类似QQ好友列表

    由于工作需要,今天简单研究了一下ExpandableListView,做了一个类似QQ列表的Demo,和大家分享一下. 效果图如下: 先来看看主布局文件: <RelativeLayout xml ...

  4. hover时显示可跟随鼠标移动的浮动框，运用函数节流与去抖进行优化

    在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle). 需要完成的效果是,鼠标在表格的单元格 ...

  5. iOS类似QQ好友展开和合并列表的实现代码

    其实原理就是好友列表合上的时候,将这组的cell数设置为0,展开的时候,在变成原来的,就是这么简单 -(); }

  6. electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒

    公司项目有一款带即时聊天.群组功能的APP,因为要给客服人员使用,需要开发PC版本.之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实 ...

  7. iOS UITableView制作类似QQ好友列表视图

                #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDele ...

  8. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  9. C# WinForm 类似QQ靠近屏幕边缘隐藏显示

    当窗体离屏幕四周一定距离时,改变窗体位置,引导窗体靠边:靠边后,当鼠标离开窗体时,改变窗体位置,窗体隐藏,凸出一点在屏幕内:隐藏后,当鼠标移到窗体时,窗体显示. using System; using ...

随机推荐

  1. Windows Server 2008 R2 安装 media Service 部分更新没有安装 KB963697

    1.下载安装包 Windows6.1-KB963697-x64.msu 2.安装过程失败,提示未安装更新 我是阿里云的服务器,一直出现下面提示 经过反复研究,确定系统问题,重新恢复了初始系统,再进行安 ...

  2. 疯狂Android讲义 - 学习笔记（七）

    第8章 Android数据存储与IO  Java IO的数据存储可以移植到Android应用开发上来,Android系统还提供了一些专门的IO API. Android系统内置了SQLite数据库,S ...

  3. UDS(ISO14229-2006) 汉译(No.3术语与定义)

    下列术语适用于本文档. 3.1 integer 类型 定义正负整数的数据类型. 注:integer类型取值范围未在本文档定义. 3.2 diagnostic trouble code 由车载诊断系统获 ...

  4. php实现设计模式之 解释器模式

    <?php /* * 解释器模式:给定一种语言,定义它文法的一种表示,并定义一个解释器,该解释器利用该表示来解释语言中的句子 * */ class Expression { function i ...

  5. php实现设计模式之 桥接模式

    <?php /** 桥接模式:将抽象部分与实现部分分离,使它们都可以独立的变化. * * 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,桥接模式就是应对这种多维度的变化 */ ...

  6. ABP 初探 之User、Role、Permission数据库设计 （EntityFramework 继承的另一种使用方法）

    最近群里(134710707)的朋友都在讨论ABP源码,我把最近学习的内容记录下来,同时也分享给大家,希望正在研究ABP源码的朋友有一定帮助. 上篇介绍ABP的多语言,本篇主要介绍权限的数据库设计,用 ...

  7. 【转】微信小程序给程序员带来的可能是一个赚钱的机遇

    自上周被微信小程序刷屏之后,这周大家都在谈微信小程序能够带来哪些红利的话题,其实我想从程序员的角度来谈谈,带给我们程序员来的红利,或许是我们程序员创业或者赚钱的机遇. 其实我从<作为移动开发程序 ...

  8. 今天写项目时，突然发现canvas的一些公式不记得了，所以整理了一番，分享给大家。

    Canvas 标签<canvas></canvas> 默认宽300,高150,不用用Css设置宽高 获取方法var ctx = cas.getcontext("2d& ...

  9. Nginx主配置参数详解，Nginx配置网站

    1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...

  10. 弄一个ajax笔记方便查询-$.ajax()

    $.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表: 参数 类型 说 ...