JS完成鼠标经过基友列表中的老铁头像时呈现资料卡的功用,基于JS怎么着贯彻类似QQ亲密的朋友头像hover时来得资料卡的成效

依照项目标要求,须要创设出如下的一种页面效果:当用户鼠标经过亲密的朋友列表中亲密的朋友头像时,突显该亲密的朋友的基本资料,其实也正是相仿QQ客户端的这种功用。
图片 1
网络找了累累代码,基本都达成了鼠标悬浮之后弹出div,离开之后立即就藏形匿影了。还应该有个别纯CSS的代码达成了如此的功能,可是对本身没用,小编索要的是JS的(因为小编的数目还要经过Ajax猎取),况且鼠标离开后不能够即时掩饰,那个div上还只怕有意义入口。那几个页面效果折腾了自家一天,综上可得小编的JS和CSS技巧有待增长…

一、应用场景

搜索了绵绵,终于发掘了实用的2个思路如下,那2个措施有个例子,不是自个儿写的,小编也没用到,转过来共享一下,示范地址。作者的秘诀参照他事他说加以考察了艺术B的笔触。

鼠标hover弹出div,何况鼠标离开后不可能立时遮盖,因为这一个div上还应该有意义入口。举例:

方法A:

鼠标经过亲密的朋友列表中的老铁头像时展现资料卡的作用如下所示:

把浮动div和触发成分a放于同一个父级元素内,鼠标经过父级成分时接触显示。那样鼠标移动到div时依旧处于该父级成分内,则div不会暗藏。

图片 2

方法B:

hover时展现二维码

鼠标经过a时弹出div,鼠标离开a时设置多个电火花计时器用来关闭div,假使鼠标移动到div后则清除测量时间的装置。
—————————————————————————————————————————————————————————————————————————————

图片 3

自家这一个法子正是利用了上边方法B的思辨,当用户距离触发事件的图像后,资料卡div要延时3秒才后关门,用户全数丰硕的时间进行相应的操作,当用户点击任何好朋友图像时,则会立时调用hidden方法,将事先的开发正在计时的div关闭。

二、实现

下边给出笔者的方式的JS代码:

用如下那样一个简约的功用:鼠标hover到A上海展览中心示B来效仿

//显示资料卡 
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(); 
}

图片 4

上边是HTML中的遮蔽的div代码片段:

有2种完毕格局,推荐第二种,第一种有缺陷下边会说。

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

1、方法一

在HTML中,必要调用showInfoCard和hideInfoCard方法,使用以下语句监听鼠标事件:

规律:把触发元素A和要来得成分B放于同三个父级成分内,鼠标经过父级成分时接触呈现B。那样鼠标移动到B时依然处于该父级成分内,则div不会暗藏。

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')" 

代码:

那个都以动态的代码片段,采纳的时候供给引进jquery.js框架,当然也得以修改成纯JS的。下边包车型大巴到位了,AJAX获得音信,然后使用JS在上头div中插入HTML代码就能够成功展现,末了来张伊始的功效图,挺丑的…
图片 5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover A show B</title>
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style type="text/css">
#hook { float: left; margin: 10px 0 10px 10px; width: 50px; height: 50px; background-color: #ccc; }
#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }
</style>
</head>
<body>
<div id="hoverWrap">
 <div id="hook">A</div>
 <div id="msg-box">功能模块B</div>
</div>
<script type="text/javascript">
$("#hoverWrap").hover(function(){
 $("#msg-box").toggle();
});
</script>
</body>
</html>

图片 6

这种艺术完结起来相比简单,但需包裹一层父标签且有个破绽:三个因素无法有距离。

2、方法二

规律:鼠标经过A时弹出B,鼠标移出A,设置三个反应计时器延迟0.5s再关闭B,所以鼠标移入A时需判别,假设有停车计时器则先祛除放大计时器再突显B。

当用户距离触发事件的A后,资料卡div要延时0.5秒才后关门,用户具有丰硕的时日进行对应的操作,当鼠标移入资料卡B,将B中在此之前正在计时关闭B的放大计时器关闭。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图