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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
js实现计算器功能
Aug 10 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python中实现三目运算的方法
2015/06/21 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Django缓存Cache使用详解
2020/11/30 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
相亲大会策划方案
2014/06/05 职场文书
婚宴新郎致辞
2015/07/28 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书