时间:2021-05-25
一、应用场景
鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口。比如:
鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示:
hover时显示二维码
二、实现
用如下这样一个简单的效果:鼠标hover到A上显示B来模拟
有2种实现方式,推荐第二种,第一种有弊端下面会说。
1、方法一
原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B。这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏。
代码:
<!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>这种方法实现起来比较简单,但需包裹一层父标签且有个弊端:两个元素不能有间距。
2、方法二
原理:鼠标经过A时弹出B,鼠标移出A,设置一个计时器延迟0.5s再关闭B,所以鼠标移入A时需判断,如果有计时器则先清除计时器再显示B。
当用户离开触发事件的A后,资料卡div要延时0.5秒才后关闭,用户拥有足够的时间进行相应的操作,当鼠标移入资料卡B,将B中之前正在计时关闭B的计时器关闭。
完整代码如下:
<!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; 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="hook">A</div><div id="msg-box">功能模块B</div><script type="text/javascript">var timer;$("#hook,#msg-box").bind("mouseover",showMsgBox);$("#hook").bind("mouseout",hideMsgBox);$("#msg-box").bind("mouseout",function(){ if(timer){clearTimeout(timer);} $("#msg-box").hide(); });function showMsgBox(){ if(timer){clearTimeout(timer);} $("#msg-box").show();}function hideMsgBox(){ timer=setTimeout(function(){ $("#msg-box").hide(); },500);}</script></body></html>js部分:
<script type="text/javascript">var timer;$("#hook,#msg-box").bind("mouseover",showMsgBox);$("#hook").bind("mouseout",hideMsgBox);$("#msg-box").bind("mouseout",function(){ if(timer){clearTimeout(timer);} $("#msg-box").hide(); });function showMsgBox(){ if(timer){clearTimeout(timer);} $("#msg-box").show();}function hideMsgBox(){ timer=setTimeout(function(){ $("#msg-box").hide(); },500);}</script>注意事项
1、触发事件用mouseover而非mousemove。
mouseover:鼠标移入目标元素上方时触发。
mousemove:鼠标在元素内部移动时不断触发。
所以用mouseover,mousemove耗资源。
更多信息可参考:http:///starof/p/4106904.html
2、 调用timer前先声明
若不声明,则timer在第一次鼠标移出时才会声明,所以第一次鼠标移入时会报错提示timer未声明。
3、调用mouseover事件前必须先清除定时器
若不清除,计时0.5s后会自动关闭B
三、封装成一个通用功能
考虑到这个功能比较通用,所以封装了一下。因为js需要处理一些兼容性问题,所以用jquery来写。
/*** @Description 鼠标hover到oHook上显示oMsgBox。* @Author liuxiaoyan * @Date 2016-03-24 15:01:13* @Last Modified by: liuxiaoyan* @Last Modified time: 2016-03-24 15:01:13*//*** @param oHook:要hover上去的元素* @param oMsgBox:hover上去要显示的元素* 调用示例:hoverShowMsg.init({hook:$(".viewPhone"),msgBox:$(".viewPhonescan")});*/var hoverShowMsg=(function(){ var oHook, oMsgBox, timer; function init(o){ oHook=o.hook; oMsgBox=o.msgBox; bindEvent(); } function bindEvent(){ oHook.bind({ mouseover:showMsgBox, mouseout:hideMsgBox }); oMsgBox.bind({ mouseover:showMsgBox, mouseout:function(){ if(timer){clearTimeout(timer);} oMsgBox.hide(); } }); } function hideMsgBox(){ timer=setTimeout(function(){ oMsgBox.hide(); },500); } function showMsgBox(){ if(timer){clearTimeout(timer);} oMsgBox.show(); } return{init:init};})();以上所述是小编给大家介绍的基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)的全部内容,希望对大家有所帮助,如果大家有疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
qq资料卡皮肤怎么还原?qq资料卡皮肤怎么还原资料卡皮肤还原教程qq资料卡皮肤怎么还原资料卡皮肤还原教程qq资料卡皮肤怎么还原资料卡皮肤还原教程qq资料卡皮肤怎
QQ点赞资料卡的方法为: 1、首先打开手机QQ软件,然后点击想要点赞资料卡的好友。 2、接着点击右上方的点赞图标即可。 QQ是腾讯QQ的简称,是一款基于I
qq资料卡的位置如下: 1、手机进入qq界面,点击头像。 2、在打开的界面点击一下qq昵称。 3、点击界面下面的编辑资料即可打开资料卡。 QQ是腾讯QQ
qq空间亲密度查看的方法如下: 1、登录手机QQ,在联系人列表中点击要查看亲密度的好友头像。 2、在个人资料卡页面,点击好友的QQ空间。 3、进入后,可以
以QQ为例,资料卡把头像居中的方法: QQ是腾讯QQ的简称,是一款基于Internet即时通信(IM)软件。目前QQ已经覆盖MicrosoftWindows、