根据项目的需要,我们需要
创建以下页面效果:当
用户鼠标在好友列表中传递好友的头部时,它
显示了好友的基本信息,这实际上是类似于QQ客户端的
功能。
互联网上
发现了很多代码,基本上是鼠标暂停后div弹出,离开后立即消失。还有一些纯CSS代码实现了这个效果,但它对我不起
作用。我需要的是JS(因为我的数据也通过Ajax),和鼠标不能离开后立刻躲起来,还有的在学这一页的
影响函数的入口是一天当我看到我的JS和CSS技术需要改进…
经过长时间的探索,我终于找到了2个可行的办法。这2种
方法有一个示例,不是我编写的,我没有使用它,所以我将转而
分享演示
地址。
方法一:
浮动div和触发器元素A被放置在同一父元素中,而鼠标是由父元素触发的,所以当它移动到div时,鼠标仍然处于父元素中,然后div不隐藏。
方法B:
鼠标弹出div当它流过,当鼠标离开,定时器
设置为当鼠标移动到DIV关部,计时器清零。
——……---……---…………---……---- ----
这种方法是用上述方法B的思想,当用户离开图像数据的触发事件后,将延时3秒后div收卡,有足够的时间进行相应的
操作的用户,当用户点击图像的其他朋友,它会立即隐藏方法,将定时器
关闭之前打开
运行部
下面是我的方法的js代码:
显示/数据卡
无功beforeid; / /全局变量的定义
功能showinfocard(thisobj,ID){
This.hidden(beforeid); / /立即隐藏div打预选
beforeid = ID;
警报(id);
无功 / / D = $(thisobj);
POS =(d.offset) / /无功;
T / / var = pos.top + d.height(- 5); / /弹出框的顶部
位置 我 / / var = pos.left - d.width(- 600); / /弹出框的左边位置
/ / $(# (CSS +身份证){顶:T,左:L(显示)});
无功objdiv = $(+身份证# );
(objdiv美元)。Css(显示
(objdiv美元)。Css(左,事件。clientx-280); / / X弹出框的位置值
(objdiv美元)。Css(顶事件。clienty-10); / / Y弹出框的位置
}
功能hideinfocard(ID){ / /格。
延迟3秒
setTimeout(隐藏(+编号+ ')',3000);
}
函数隐藏(id){
$(+身份证# )(隐藏);
}
下面是HTML中隐藏的div代码片段:
在HTML中,该showinfocard和hideinfocard方法需要调用,和下面的语句是用来监视鼠标事件:
onmouseover =showinfocard(,$ {朋友}。friendid ')onmouseout=hideinfocard($ {朋友}。friendid)
这些
都是动态的代码片段,需要引入jquery.js框架时采用,当然可以改为纯JS。以上是成品,Ajax获取信息,然后使用js插入HTML代码在顶部的DIV来完成显示。最后,制作一个初步效果
图片,它相当丑陋。