Question

我有一个div框，每当我移动时，工具提示会出现及其相应的坐标。我想要的是，如果我继续在div内移动，我的工具提示将不会显示，但如果我停止移动，那么我的工具提示将会出现。顺便说一句，我不得不在jquery中使用mouseover事件，因为每当我移动鼠标时我都需要提取坐标。

请帮忙！请提供我的例子。并且尽可能地我不想使用插件。

谢谢！

到目前为止我的进展：

<html>
<head>
    <style>
        #box {
            border: 1px solid black;
            width: 900px;
            height: 450px;
            margin: 0 auto;
            margin-top: 50px;
        }

        #tooltip{
            margin:8px;
            padding:8px;
            border:1px solid blue;
            background-color:yellow;
            position: absolute;
            z-index: 2;
            display: none;
        }
    </style>

    <script type="text/javascript" src='/libs/jquery/jquery.js'></script>
    <script>
        $(document).ready( function() {
            var offsetX = 20;
            var offsetY = 10;

            $('#box').mouseover(function(e) {
                var href = $(this).attr('href');
                $('<div id="tooltip"><input type="text" id="coor"/>    </div>').appendTo('body');
            });

            $('#box').mouseout(function(e) {
                $('#tooltip').remove();
            });

            $('#box').mouseenter( function() {
                // alert('entered');
            });

            var x = 0;

            $('#box').mousemove(function(e) {
                $('#tooltip').fadeOut('fast');

                var doIt = function() {
                    $('#tooltip').fadeIn(500);
                }

                setTimeout(doIt, 2500);

                $('#tooltip')
                    .css('top', e.pageY + offsetY)
                    .css('left', e.pageX + offsetX);
                $('#coor').val(e.pageX + '' + e.pageY);
            });
        });
    </script>
</head>

<body>
    <div id="box">

    </div>
    action: <input type="text" id="action" />
</body>

Answer 1

jQuery中没有mousestop的事件。但是this jquery插件具有您正在寻找的相同事件例如

$('#box').bind('mousestop', function() {
  // do stuff here 
});

取消绑定

 $('#box').unbind('mousestop');

Answer 2

我认为这就是你所追求的目标：

$('.box')[0].onmousemove = (function() {
    var onmousestop = function() {
       $('.box').css('background-color', 'red');
    }, thread;

    return function() {
       $('.box').css('background-color', 'black');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

在延迟1500毫秒之后，它会使盒子变红，一旦用户再次移动鼠标，盒子就会变成红色，只需替换你自己的动作。

jQuery的：

var onmousestop = function (){
    $('.box').css('background-color', 'red');
}, thread;
$('.box').on('mouseenter',function (){
    onmousestop();
}).on('mousemove',function (){
    $('.box').css('background-color', 'black');
    thread&&clearTimeout(thread);
    thread = setTimeout(onmousestop, 3000);
});

Demo

如何在鼠标移动时隐藏div并在停止时显示？

2 个答案: