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提交表单ajax查询实例代码
Oct 07 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
微信公众号H5支付接口调用方法
Jan 10 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
用javascript实现自定义标签
2007/05/08 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python素数检测的方法
2015/05/11 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python递归实现快速排序
2018/08/18 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
python元组拆包实现方法
2021/02/28 Python
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
windows server2008 开启端口的实现方法
2022/06/25 Servers