JS实现类似QQ好友头像hover时显示资料卡的效果-阿里云开发者社区

开发者社区> ghost丶桃子> 正文

JS实现类似QQ好友头像hover时显示资料卡的效果

简介:
+关注继续查看

一、应用场景

鼠标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有问题欢迎与我讨论,共同进步。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【物联网智能网关-02】获取摄像头数据+显示
开发了一套扩展库,用户只要几行代码,就可以完成和传感器的通信,从而获取数据。YFSoft.Hardware.Camera.PTC01.dll就是一种这样的库。
542 0
tiltShift.js - CSS3 滤镜实现移轴镜头效果
  tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
1136 0
3.CCFadeOutTRTiles,部落格效果,跳动的方块特效,3D瓷砖晃动特效,破碎的3D瓷砖特效,瓷砖洗牌特效,分多行消失特效,分多列消失特效
 1 TiledGrid3D //TiledGrid3D //CCFadeOutTRTiles * action = CCFadeOutTRTiles::create(2, CCSize(20,20)); //CCFadeOutBLTiles * action = CCFadeOutBLTiles::create(2, CCSi
1577 0
巧用CSS3滤镜实现图片不同渲染效果
本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。 CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
1022 0
微信好友全头像
直接上图 代码 import itchat import math import PIL.Image as Image import os itchat.
600 0
发一个软件,上次发的照片的效果的制作软件
上次发的照片效果http://www.cnblogs.com/aowind/archive/2005/03/03/112392.htmlp 这个效果我就是用下面这个软件做出来的http://files.cnblogs.com/aowind/HTMLImager.rar朋友们可以下载下来的试试其实是很简单的一个软件主要是读图片文件的像素色彩信息,然后用随机生成的数字来替代像素,给它赋上相同的色彩,就构成了一个用数字组成的图像网页了。
535 0
项目中的五级地址联动效果(js)
我刚开始是的时候是是写了一个sql语句,但是写了5个函数,来联动地址的。后来请教了前端的师傅,用js来写了一个地址联动的。 我使用的是easyui的框架! 地址联动部分html代码! 省 : 市 : 区/县: 街道: 社区: 因为我的是在添加了一条数据之后,要刷新整个页面。
551 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载