3

我有一个 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>

4

2 回答 2

4

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

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

解绑 

 $('#box').unbind('mousestop');
于 2012-06-11T07:51:59.873 回答
4

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

$('.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);
});

演示

于 2012-06-11T08:00:42.700 回答