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


Posted in Javascript onJuly 02, 2014

基于项目的需要,需要制作出如下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能。
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
网上找了很多代码,基本都实现了鼠标悬浮之后弹出div,离开之后马上就消失了。还有些纯CSS的代码实现了这样的效果,但是对我没用,我需要的是JS的(因为我的数据还要通过Ajax取得),并且鼠标离开后不能马上隐藏,这个div上还有功能入口。这个页面效果折腾了我一天,由此可见我的JS和CSS技术有待提高...

搜索了好久,终于发现了可行的2个思路如下,这2个方法有个例子,不是我写的,我也没用到,转过来分享一下,演示地址。我的方法参考了方法B的思路。

方法A:

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

方法B:

鼠标经过a时弹出div,鼠标离开a时设置一个计时器用来关闭div,如果鼠标移动到div后则清除计时器。
—————————————————————————————————————————————————————————————————————————————

我这个方法就是采用了上面方法B的思想,当用户离开触发事件的图像后,资料卡div要延时3秒才后关闭,用户拥有足够的时间进行相应的操作,当用户点击其他好友图像时,则会立刻调用hidden方法,将之前的打开正在计时的div关闭。

下面给出我的方法的JS代码:

//显示资料卡 
var beforeId; //定义全局变量 
function showInfoCard(thisObj,id){ 
this.hidden(beforeId); //立刻隐藏前一个选中弹出来的div 
beforeId = id; 
// alert(id); 
// var d = $(thisObj); 
// var pos = d.offset(); 
// var t = pos.top + d.height() - 5; // 弹出框的上边位置 
// var l = pos.left - d.width() - 600; // 弹出框的左边位置 
// $("#"+id).css({ "top": t, "left": l }).show(); 
// 

var objDiv = $("#"+id); 

$(objDiv).css("display","block"); 

$(objDiv).css("left", event.clientX-280); //弹出框的位置X值 

$(objDiv).css("top", event.clientY-10); //弹出框位置Y值 
} 
function hideInfoCard(id){ //隐藏div 
//延时3秒 
setTimeout('hidden('+id+')',3000); 
} 

function hidden(id){ 
$("#"+id).hide(); 
}

下面是HTML中的隐藏的div代码片段:

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

在HTML中,需要调用showInfoCard和hideInfoCard方法,使用以下语句监听鼠标事件:

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')"

这些都是动态的代码片段,采用的时候需要引入jquery.js框架,当然也可以修改成纯JS的。上面的完成了,AJAX取得信息,然后利用JS在上面div中插入HTML代码即可完成显示,最后来张初步的效果图,挺丑的...
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果

Javascript 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
动态加载js、css的实例代码
May 26 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 #Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 #Javascript
js面向对象编程之如何实现方法重载
Jul 02 #Javascript
jquery.validate.js插件使用经验记录
Jul 02 #Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 #Javascript
js获取IP地址的方法小结
Jul 01 #Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP实时显示输出
2008/10/02 PHP
关于php fread()使用技巧
2010/01/22 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
解析js原生方法创建表格效率测试
2013/07/08 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
python发送伪造的arp请求
2014/01/09 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python实现图像的垂直投影示例
2020/01/17 Python
python 爬取小说并下载的示例
2020/12/07 Python
博士学位自我鉴定范文
2013/12/26 职场文书
协议书范本
2014/04/23 职场文书
学生安全承诺书
2014/05/22 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL