JS实现鼠标经过用户头像显示资料卡的效果，可点击

最新推荐文章于 2023-03-09 11:37:59 发布
VIP文章 最新推荐文章于 2023-03-09 11:37:59 发布
阅读量1w 收藏 3
点赞数 3
分类专栏： JS 文章标签： js 资料卡 div显示和隐藏 jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhshulin/article/details/36204089
版权

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


       网上找了很多代码，基本都实现了鼠标悬浮之后弹出div，离开之后马上就消失了。还有些纯CSS的代码实现了这样的效果，但是对我没用，我需要的是JS的（因为我的数据还要通过Ajax取得），并且鼠标离开后不能马上隐藏，这个div上还有功能入口。这个页面效果折腾了我一天，由此可见我的JS和CSS技术有待提高...

       搜索了好久，终于发现了可行的2个思路如下，这2个方法有个例子，不是我写的，我也没用到，转过来分享一下。下载地址。我的方法参考了方法

最低0.47元/天 解锁文章
shu_lin
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
原生js实现鼠标点击效果（不是真实鼠标点击，用js模拟鼠标点击，类似jquery trigger效果）
qq_28020627的博客
01-20 4335
这是一个测试文件 user-scalable=no"> 测试原生js触发事件 function trigger(node, event){     if(document.all) {         node.click();     }else {         var e = document.createE
Js仿Discuz论坛头像提示，鼠标放上显示用户信息
05-12
内容索引:脚本资源,Ajax/JavaScript,仿Discuz,头像,提示层　　仿Discuz的头像提示效果，鼠标放头像上，会出现此头像的用户信息，比如用户ID、金钱、威望等，使用了一个封装的JS类，可设置Tip样式，offset参数修正，移入Tip对象时保持显示状态，这里要注意，如果是外部元素进入，说明当前是隐藏延时阶段，那么清除定时器取消隐藏，触发方式的选择，设置默认属性，比如显示或隐藏的方式、延迟方式【"click":只用点击方式,"touch":只用触发方式,"both":两个都使用,"none":都不使用】、定位对象、检查触发元素【返回是否外部元素（即触发元素和Tip对象本身及其
JS实现的模仿QQ头像资料卡显示与隐藏效果
10-20
主要介绍了JS实现的模仿QQ头像资料卡显示与隐藏效果,涉及javascript鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下
JS点击头像出现详细信息其它变灰
09-26
JS点击头像出现详细信息其它变灰
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
11-23
一、应用场景 鼠标hover弹出div，并且鼠标离开后不能马上隐藏，因为这个div上还有功能入口。比如： 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示： hover时显示二维码 二、实现 用如下这样一个简单的效果：鼠标hover到A上显示B来模拟 有2种实现方式，推荐第二种，第一种有弊端下面会说。 1、方法一 原理：把触发元素A和要显示元素B放于同一个父级元素内，鼠标经过父级元素时触发显示B。这样鼠标移动到B时仍然 处于该父级元素内，则div不会隐藏。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
JS实现类似QQ好友头像hover时显示资料卡的效果
weixin_34096182的博客
03-25 264
一、应用场景 鼠标hover弹出div，并且鼠标离开后不能马上隐藏，因为这个div上还有功能入口。比如： 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二、实现 用如下这样一个简单的效果：鼠标hover到A上显示B来模拟 有2种实现方式，推荐第二种，第一种有弊端下面会说。 1、方法一 原理：把触发元素A和要显示元素B放于同一个父...
HTML 练习实现鼠标移到用户图像展示更多信息
weixin_30287169的博客
03-13 393
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } ...
鼠标滑过显示人物头像
09-13
鼠标滑过列表中人物名称时，显示人物头像及名称
鼠标经过时弹出层的效果示例
07-15
鼠标经过时弹出层的效果示例，现在是静态数据，如果需要动态请求，根据传值getJson去后台取数据即可。
个人资料卡片：使用HTML和CSS创建的个人资料卡片组件
02-15
:bust_in_silhouette: 个人资料卡组件 使用HTML和CSS创建的配置文件组件。 目录 部署方式 演示： : 建于 HTML CSS s 珍妮弗·罗莎· 执照 该项目已获得MIT许可。 版权（c）2021珍妮弗·罗莎（Jennifer Rosa） 特此免费授予获得该软件和相关文档文件（“软件”）副本的任何人无限制使用软件的权利，包括但不限于使用，复制，修改，合并的权利，发布，分发，再许可和/或出售本软件的副本，并允许具备软件的人员这样做，但须满足以下条件： 以上版权声明和本许可声明应包含在本软件的所有副本或大部分内容中。 该软件按“原样”提供，不提供任何形式的明示或暗示担保，包括但不限于对适销性，特定目的的适用性和非侵权性的担保。 无论是由于软件，使用或其他方式产生的，与之有关或与之有关的合同，侵权或其他形式的任何索赔，损害或其他责任，作者或版权所有者概不负责。软件。 致谢 前端导师
jQuery漂浮广告
03-19
jQuery漂浮广告，供大家一起共同分享学习。
ToolTip（Qt实现鼠标停留在QQ头像上显示更多资料的ToolTip功能）.zip
06-17
Qt5+VS2015环境下，模拟Qt的ToolTip功能，实现更加完整的tip显示效果，如同QQ上，鼠标停留在好友QQ头像出现浮窗显示好友更多资料
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
10-25
需求为当用户鼠标经过好友列表中好友头像时，显示该好友的基本资料，其实也就是类似QQ客户端的那种功能，下面是具体的实现思路及过程
原生js轮播图之鼠标事件显示对应图片
voice的博客
11-14 996
前言 自己写了个轮播，感觉还可以，拿来练手不错，遂记录下来。 首先看下动态图： 全部代码 <!DOCTYPE html> <html> <head> <title>原生js轮播图之鼠标事件显示对应图片</title> <meta charset="utf-8"> <style type="text/css"&gt...
JS在鼠标单击处添加图片
weixin_52215397的博客
03-09 152
【代码】JS在鼠标单击处添加图片。
android自定义卡片布局,Android自定义LayoutManager实现表格，卡片显示效果
最新发布
06-08
好的，针对你的问题，我可以提供一些参考资料和思路： 1. 自定义卡片布局： 可以使用 RecyclerView 来实现卡片布局，然后自定义 ItemDecoration 来实现卡片之间的间隔和边框等效果。可以参考以下链接： - https://www.jianshu.com/p/127c5e7c4d27 - https://www.jianshu.com/p/0f2c5e69b64e 2. 自定义LayoutManager实现表格布局： 可以自定义 RecyclerView 的 LayoutManager 来实现表格布局，可以参考以下链接： - https://blog.csdn.net/zxt0601/article/details/52147850 - https://www.jianshu.com/p/1a5e5d54e3f3 3. 卡片显示效果： 可以使用 CardView 来实现卡片的显示效果，可以参考以下链接： - https://www.jianshu.com/p/2d5a7a9eaf54 希望以上内容能够帮到你。如果还有其他问题，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值