Javascript 如何像youTube那样影响鼠标移动，

如何应用mousemove事件，这样我们就可以像vlc播放器对seekbar或Youtube对VideoTitle一样获得效果

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

为什么需要：我正在开发一个类似视频库的网站，有一个seekbar，当鼠标在几分钟内不移动时，我想禁用它，如果鼠标移动，则使其可见

我所做的：

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

---

尽管它很有趣，但不幸的是它并没有太大帮助，

您可以使用

mousemove

事件

下面是这方面的工作代码，您可以使用它并根据需要进行修改

HTML

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

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

    });

---

如果希望在鼠标移动时显示元素，则在指定的不移动时间后，元素会自动消失，可以执行以下操作：

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

---

您可以使用

mousemove

事件

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