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 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 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
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Python脚本实时处理log文件的方法
2016/11/21 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
校园公益广告语
2014/03/13 职场文书
教师节慰问信
2015/02/15 职场文书
公司仓库管理制度
2015/08/04 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技