当前位置: 首页 > 编程笔记 >

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

薛墨一
2023-03-14
本文向大家介绍JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果,包括了JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果的使用技巧和注意事项,需要的朋友参考一下

基于项目的需要,需要制作出如下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能。

网上找了很多代码,基本都实现了鼠标悬浮之后弹出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如何实现类似QQ好友头像hover时显示资料卡的效果(推荐),包括了基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)的使用技巧和注意事项,需要的朋友参考一下 一、应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口。比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二、实现 用

  • 问题内容: 我有一个MySQL数据库,其中存储了每个用户的数据。 我想为每个用户添加一个朋友列表。我应该为数据库中的每个用户创建一个朋友表还是有更好的方法? 问题答案: 假设所有朋友也都在用户表中,则需要一个朋友表,该表定义了简单的一对多关系-将用户表链接回自身。所以 其中UserIDLink1和UserIDLink2都是Users表上的外键。 例如,如果我有三个用户 并且Joe和Jane是朋友,

  • 本文向大家介绍jQuery实现友好的轮播图片特效,包括了jQuery实现友好的轮播图片特效的使用技巧和注意事项,需要的朋友参考一下 先上效果图: 【处理】 这里的图片滚动轮播,做了点小处理:当在第1页状态时,你点击第5页,图片的滚动是一张滑过,而不是从2-3-4-5(这种的多张滚动,看得头晕眼花); 实现的做法是: 剩下的就是源代码分享了: -------css---------------- -

  • 本文向大家介绍易语言实现无需加好友强制查看QQ资料卡片的方法,包括了易语言实现无需加好友强制查看QQ资料卡片的方法的使用技巧和注意事项,需要的朋友参考一下 调用腾讯的弹出QQ资料卡片接口实现强制查看QQ资料卡片的功能 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对呐喊教程的支持。如果你想了解更多相关内容请查看下面相关链接

  • 如何在Facebook api 2.0版中获取所有好友列表。我在1.0版中获取,但在2.0版中只返回已授权使用同一应用程序的好友列表。 我需要我所有的朋友列表,并且有DOB使用图形API。 上面的请求不是给我所有朋友的数据。任何一个都可以帮我。

  • 主要内容:使用传递元素,使用传递属性JavaServer Faces支持HTML5,允许您直接在网页中使用HTML5标记。 它还允许您在HTML5元素中使用JavaServer Faces属性。 JavaServer Faces支持HTML5分为两类: 直通元素 传递属性 HTML5友好的标记功能可通过渲染的页面输出完成对Facelets页面的控制,而不必将该控件传递给组件。 您可以混合和匹配JavaServer Faces和HTM