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代码即可完成显示，最后来张初步的效果图，挺丑的...

赞 (0)

相关推荐

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

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

    基于项目的需要,需要制作出如下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能. 网上找了很多代码,基本都实现了鼠标悬浮之后弹出div,离开之后马上就消失了.还有些纯CSS的代码实现了这样的效果,但是对我没用,我需要的是JS的(因为我的数据还要通过Ajax取得),并且鼠标离开后不能马上隐藏,这个div上还有功能入口.这个页面效果折腾了我一天,由此可见我的JS和CSS技术有待提高... 搜索了好久,终于发现了可行的2个思路如下,这2个方法

  • 基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE ht

  • 浅谈VS中添加头文件时显示无法找到文件的问题

    目录或库文件名中包含汉字或空格的话,请将其用半角双引号括住. 项目.属性.C/C++.附加包含目录:填写附加头文件所在目录 分号间隔多项 项目.属性.链接器.附加库目录:填写附加依赖库所在目录 分号间隔多项 项目.属性.链接器(点前面的+展开).输入.附加依赖项:填写附加依赖库的名字.lib 空格间隔多项 这样在我们添加现有项后,经常出现的找不到源文件等等问题就解决了 以上这篇浅谈VS中添加头文件时显示无法找到文件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们

  • JS实现的模仿QQ头像资料卡显示与隐藏效果

    JS实现的模仿QQ头像资料卡显示与隐藏效果

    本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果.分享给大家供大家参考,具体如下: 我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当鼠标移出头像或资料卡时,资料卡延时隐藏. 实质就是延时提示框问题! 首先写好布局: <style> div { float:left; margin:5px; } .head { width:50px;height:50px;background-color:pink; } .info

  • js判断鼠标位置是否在某个div中的方法

    本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

  • JS实现鼠标滑过折叠与展开菜单效果代码

    JS实现鼠标滑过折叠与展开菜单效果代码

    本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC

  • android仿微信好友列表功能

    android studio实现微信好友列表功能,注意有一个jar包我没有放上来,请大家到MainActivity中的那个网址里面下载即可,然后把pinyin4j-2.5.0.jar复制粘贴到项目的app/libs文件夹里面,然后clean项目就可以使用了 实现效果图: (1)在build.gradle中引用第三方的类库 compile 'com.android.support:recyclerview-v7:26.0.0-alpha1' compile files('libs/pinyin4j

  • JS仿QQ好友列表展开、收缩功能(第二篇)

    JS仿QQ好友列表展开、收缩功能(第二篇)

    在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: <script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2'); var uls = list.getElementsByTagName('ul'); var lis = null;//用于下面的存储 var arrl

  • 使用UItableview在iOS应用开发中实现好友列表功能

    使用UItableview在iOS应用开发中实现好友列表功能

    基本实现 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController 复制代码 代码如下: //  YYViewController.h //  02-QQ好友列表(基本数据的加载) // //  Created by apple on 14-5-31. //  Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h> @interface YY

  • JS实现一个列表中包含上移下移删除等功能

    JS实现一个列表中包含上移下移删除等功能

    最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML <ul class="clearfix"> <li class="courseList"> <div class=&

随机推荐