脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 鼠标经过头像显示资料卡

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

 更新时间：2014年07月02日 15:59:55   投稿：whsnow  
需求为当用户鼠标经过好友列表中好友头像时，显示该好友的基本资料，其实也就是类似QQ客户端的那种功能，下面是具体的实现思路及过程

基于项目的需要，需要制作出如下的一种页面效果：当用户鼠标经过好友列表中好友头像时，显示该好友的基本资料，其实也就是类似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代码即可完成显示，最后来张初步的效果图，挺丑的...

您可能感兴趣的文章:

相关文章

  • Javascript动画效果（4）

    Javascript动画效果（4）

    这篇文章主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • BootStrap与Select2使用小结

    BootStrap与Select2使用小结

    这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。接下来通过本文给大家分享BootStrap与Select2使用小结，需要的朋友参考下
    2017-02-02
  • uni-app 支持多端第三方地图定位的方法

    uni-app 支持多端第三方地图定位的方法

    这篇文章主要介绍了uni-app 支持多端第三方地图定位的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 微信小程序实现本地分页加载

    微信小程序实现本地分页加载

    这篇文章主要为大家详细介绍了微信小程序实现本地分页加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JavaScript中普通属性和排序属性详解

    JavaScript中普通属性和排序属性详解

    JavaScript属性是对象中的特性,用于描述对象的状态,每个JavaScript对象都有一组属性,可以通过点号（.）或方括号（[]）访问和操作这些属性,本文将给大家讲讲JavaScript中你所不知道的普通属性和排序属性,需要的朋友可以参考下
    2023-09-09
  • 详解vscode中console.log的两种快速写法

    详解vscode中console.log的两种快速写法

    这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • 自定义require函数让浏览器按需加载Js文件

    自定义require函数让浏览器按需加载Js文件

    可能很多人看到这个题目就会想到LABjs、RequireJS、SeaJS... 这些库，但无奈小编没用过这些库，什么 AMD 、CMD 哪来那么多术语... 前端的库太多了，要看各种乱七八糟的文档，好难啊，还不如自己写一个库呢。于是就有了这文章，有需要的朋友们下面来一起学习学习吧。
    2016-11-11
  • 分享一个自己写的table表格排序js插件(高效简洁)

    分享一个自己写的table表格排序js插件(高效简洁)

    在前不久做的一个web项目中，需要实现js表格排序的效果，当时为了省事，就在网上找了几个相关的js插件
    2011-10-10
  • uni-app自定义组件和通信的方式

    uni-app自定义组件和通信的方式

    组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,组件可以使用全局注册和页面引入两种方式进行使用,对uni-app自定义组件和通信相关知识感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 定时器(setTimeout/setInterval)调用带参函数失效解决方法

    定时器(setTimeout/setInterval)调用带参函数失效解决方法

    setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式,setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，详细使用方法可以参考下本文
    2013-03-03

最新评论