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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
js 获取扫码枪输入数据的方法
Jun 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
不同Jquery版本引发的问题解决
2013/10/14 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python文件去除注释的方法
2015/05/25 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
北承题目(C++)
2012/05/16 面试题
业务部主管岗位职责
2014/01/29 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
南极大冒险观后感
2015/06/05 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL