3

div ボックスがあり、移動するたびに、対応する座標とともにツールチップが表示されます。私が望むのは、div 内を移動し続けるとツールチップが表示されなくなりますが、移動を停止するとツールチップが表示されることです。ちなみに、マウスを動かすたびに座標を抽出する必要があるため、jqueryではマウスオーバーイベントを使用する必要があります。

助けてください！また、例も教えてください。そして、プラグインはできるだけ使いたくない。

ありがとう！

これまでの私の進捗状況:

<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

私はこれがあなたが求めているものだと思います：

$('.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 に答える