其他分享
首页 > 其他分享> > 定时器之延时触发鼠标悬浮事件

定时器之延时触发鼠标悬浮事件

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时器之延时触发鼠标悬浮事件</title>
        <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
    </head>
    <style>
        body{
            background: #BEE7E9;
            width: 100%;
            height: 100%;
        }
        .hoverDiv{
            width: 100px;
            height: 100px;
            margin: 50px;
            background: #ECAD9E;
            border: 3px solid #F4606C;
            border-radius: 9px;
            cursor: pointer;
        }
        #dialog_div{
            display: none; 
            width: 100px;
            background-color: #2aa8e4fa; 
            orphans: inherit; 
            z-index: 99;
        }
    </style>
    <script type="text/javascript">
        //声明定时器变量
        var monitor;
        //传递divde DOM Event对象de中间变量(如需要动态加载div)
        var thisevent;
        //定时器之延时触发鼠标悬浮事件
        function hoverEvent(param){
            //把divde DOM Event对象赋值给中间变量thisevent
            thisevent = event;
            //初始化时间
            var initialDate = new Date();
            //相差de毫秒数
            var minseconds=0;
            //设置返回时间(目前是ms)
            var setReturnTime = 1000;
            //清除上一次de定时器
            window.clearInterval(monitor)
            //定时器
            monitor = setInterval(function (){
                //返回相差de毫秒数
                minseconds = returnDelayTime(initialDate);
                //设置时间小于定时器de时间则结束触发功能事件
                if(setReturnTime<minseconds) {
                    //清除这一次de定时器
                    window.clearInterval(monitor);
                    //延时调用de功能事件
                    hoverFunctionEvent(param);
                } 
            },100);
        }
        //清除鼠标延时定时器
        function removeEvent(){
            window.clearInterval(monitor);
            //隐藏动态加载模块
            //$("#dialog_div").hide();
        }
        //返回相差de时间
        function returnDelayTime(initialDate){
            //初始时间
            var startTime = initialDate.getTime();
            //获取当前时间
            var date = new Date();
            var nowTime = date.getTime();
            ////时间差de毫秒数
            var dateDiff = nowTime - startTime;
            //计算出相差天数
            var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
            //计算天数后剩余de毫秒数
            var leave1=dateDiff%(24*3600*1000);
            //计算出小时数
            var hours=Math.floor(leave1/(3600*1000));
            //计算小时后剩余de毫秒数
            var leave2=leave1%(3600*1000);
            //计算相差分钟数
            var minutes=Math.floor(leave2/(60*1000));
            //计算分钟数后剩余de毫秒数
            var leave3=leave2%(60*1000);
            //计算相差秒数
            var seconds=Math.round(leave3/1000);
            //计算秒数后剩余de毫秒数
            var minseconds=leave3%(60*1000);
            //返回相差de毫秒数
            return minseconds;
        }
        //显示行政班级课程表""功能事件""
        function hoverFunctionEvent(param){
            //显示动态加载模块de内容
            var showDiv=$("#dialog_div");
            showDiv.css('position','absolute');
            showDiv.css('z-index','9999');
            showDiv.html("可Ajax动态写入模块内容");
            //根据divde DOM Event对象de中间变量thisevent动态定位
            showDiv.css('left',parseInt(thisevent.x)+5+parseInt($(document).scrollLeft())+"px");
            if(parseInt(thisevent.y)-parseInt(showDiv.height())>=0){
                showDiv.css('top',parseInt(thisevent.y)+parseInt($(document).scrollTop())-parseInt(showDiv.height())+"px");
            }else{
                var divtop = parseInt(showDiv.height())-parseInt(thisevent.y);
                showDiv.css('top',parseInt(thisevent.y)+parseInt($(document).scrollTop())-parseInt(showDiv.height())+parseInt(divtop)+"px");
            }
            showDiv.show();
        }
    </script>

    <body>
        <div onm ouseover="hoverEvent('ok')" onm ouseout="removeEvent()" class="hoverDiv">
            定时器之延时触发鼠标悬浮事件
        </div>
        <div onm ouseover="hoverEvent('ok')" onm ouseout="removeEvent()" class="hoverDiv">
            定时器之延时触发鼠标悬浮事件
        </div>

        <div onm ouseover="hoverEvent('ok')" onm ouseout="removeEvent()" class="hoverDiv">
            定时器之延时触发鼠标悬浮事件
        </div>

        <div id="dialog_div">
            动态加载模块
        </div>
    </body>

</html>

 

标签:定时器,鼠标,var,延时,parseInt,showDiv,thisevent
来源: https://www.cnblogs.com/mjtabu/p/11579202.html