zoukankan      html  css  js  c++  java
  • JS实现类似QQ好友头像hover时显示资料卡的效果

    一、应用场景

    鼠标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>
    View Code

    这种方法实现起来比较简单,但需包裹一层父标签且有个弊端:两个元素不能有间距。

    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>
    View Code

    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://www.cnblogs.com/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};
    })();
    View Code

    本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5312195.html有问题欢迎与我讨论,共同进步。

  • 相关阅读:
    Do You See Me? Ethical Considerations of the Homeless
    ELDER HOMELESSNESS WHY IS THIS AN ISSUE?
    Endoflife support is lacking for homeless people
    html内联框架
    html字体
    html块 div span
    html列表
    html表格
    SQL Server管理员专用连接的使用   作为一名DBA,经常会处理一些比较棘手的服务无响应问题,鉴于事态的严重性,多数DBA可能直接用“重启”大法,以便尽快的恢复生产环境的正常运转,但是多数情况
    如何配置最大工作线程数 (SQL Server Management Studio)
  • 原文地址:https://www.cnblogs.com/starof/p/5312195.html
Copyright © 2011-2022 走看看