时间戳

首页 > 解决方案 > 我在 mousemove 上将图像附加到光标上。它一直有效，直到我滚动，分离图像，在页面上向上移动

javascript - 我在 mousemove 上将图像附加到光标上。它一直有效，直到我滚动，分离图像，在页面上向上移动

问题描述

解决方案：

$(document).mousemove(function (e) {
    var img = $(singleCardSearchElementIds.HoverImageClassName);
    var windowScrollY = window.scrollY;
    img.css({ 'top': windowScrollY + e.clientY, 'left': e.clientX + 20 });
});

这是我的主要内容的样子：

<main class="w-100 main-container">
    <div id="contentContainer" class="mw8 center content-container">
        <div id="cardContainer" class="flex flex-wrap">

        </div>
        <div id="tableContainer" class="mv2 dn">
            <img class="hover-card hover-card-loading dn" alt="" src="" />

            <table id="cardTable">
                <thead>
                    <tr>
                        <th>CardId</th>
                        <th>Set</th>
                        <th>No.</th>
                        <th>Name</th>
                        <th>Cost</th>
                        <th>Type</th>
                        <th>Rarity</th>
                        <th>Artist</th>
                        <th>ImageUrl</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</main>

默认情况下，图像与dn类一起隐藏。在 JS 中，我删除它并在悬停一行时设置图像的来源。我正在使用页面mousemove事件将图像附加到光标：

$(document).mousemove(function (e) {
    var img = $(singleCardSearchElementIds.HoverImageClassName);
    img.css({ 'top': e.clientY - 110, 'left': e.clientX + 20 });
});

当只有几行时，它几乎可以正常工作：

在此处输入图像描述

但是，如果有一堆行并且我需要滚动，则图像会向上移动，我将光标向下移动：

在此处输入图像描述

有什么想法吗？

标签： javascriptjquery

解决方案

继续评论，如果将视口的滚动 Y 添加到图像顶部 css 属性的顶部会发生什么。由于滚动 Y 从 0 开始，您会获得所需的行为，但一旦增加，您就不会。

$(document).mousemove(function (e) {
    var img = $(singleCardSearchElementIds.HoverImageClassName);
    var topY = $(window).scrollTop();
    img.css({ 'top': topY + (e.clientY - 110), 'left': e.clientX + 20 });
});

推荐阅读