Question

如何应用mousemove的事件，所以我们可以像vlc播放器对于搜索栏一样有效，或者Youtube对于VideoTitle有效。

即：在鼠标移动显示标题时，如果鼠标未移动则隐藏标题

为什么需要：我正在开发像视频库这样的网站，有一个我想在鼠标移动到一定时间时禁用的搜索栏，如果鼠标移动则让它可见。

我做了什么：

       document.body.onmousedown = function() {
            $(".myPrivateSeek").hide();
        };
        document.body.onmouseup = function() {
            $(".myPrivateSeek").show();
        };

虽然它的意思很糟糕，不幸的是它并没有那么有用，

Answer 1

您可以使用mousemove事件。

下面是一个有效的代码，您可以使用here in JSfiddle进行播放并根据需要进行修改。

<强> HTML

<div id="item">
    <p>This is my item</p>
    <div class="tooltip">Tooltip</div>
</div>

<强> CSS

#item {
        position: relative;

        background: #CCC;
    }

    #item .tooltip {
        position: fixed;
        width: 80px;
        height: 30px;
        background: #06F;
        z-index: 10;
        display: none;
    }

<强>的jQuery

$(document).ready(function() {

        $("#item").on('mousemove', function(e) { 

            $('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');

        });

        $("#item").mouseout(function() { 
            $('.tooltip').css('display', 'none');
        });

    });

Answer 2

如果您愿意，那么在鼠标移动时，您的元素会出现，然后在指定的无移动时间后会自动消失，您可以执行以下操作：

$(document).ready(function () {
    var timeoutId;
    //Replace document.body with the element you wish the mouse movement to be recognised within.
    $(document.body).on('mousemove', function () {
        //Checks if an existing timeout function exists, if so remove it.
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        $(".myPrivateSeek").show();
        //Set a callback for how long to wait after the mouse has stopped moving to hide your element.
        timeoutId = setTimeout(function () {
            $(".myPrivateSeek").hide();
        }, 1000); //The time in milliseconds to wait.
    });
});

如何实现youTube对鼠标移动的影响，

2 个答案: