Question

当我将鼠标悬停在缩略图上时，我正在尝试制作带有图像的工具提示，但我正在使用其他开发人员的代码并且无法搞清楚。

我在网站上创建了一个简化版本的代码，可以在下面找到，或者在jsfiddle上找到：http://jsfiddle.net/justinwebpro/kf8Lqn5v/5/

或我想在此处更正的问题的实际网站：https://www.mychicnest.com/ProductDetails.asp?ProductCode=503

我正在尝试使用方法.mousemove（）使其跟随鼠标位置，而不是在页面顶部静止，但我做错了。理想情况下，它会考虑光标位置的偏移，但首先让它工作！

HTML

<div id="swatch">
    <div id="panel">  
        <img src="large.jpg" id="large-image" />
    </div>
    <div id="thumbs">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
    </div>
</div>

CSS

#swatch { position: relative; }

#panel {
        position: absolute;
        top: -115px;
        left: 115px;
}

的JavaScript

function swThumbEffect(){
    $('#panel').css('visibility','hidden');

    $('#thumbs img').mouseover(function(){
        $('#largeImage').attr('src',$(this).attr('src'));
        $('#panel').css('visibility','visible');
    });
    $('#thumbs img').mouseout(function(){
        $('#panel').css('visibility','hidden');
    });
}


// This is what I came up with to get the swatch to follow the cursor but it isn't working as I hoped. Ideally it would factor in an offset of the cursor, but getting it to work comes first.
$('#thumbs img').mousemove(function( event ) {
    var mousePositionX = event.pageX;
    var mousePositionY = event.pageY;
    log(mousePositionX);
    log(mousePositionY);
    $('#panel').css('left', mousePositionX);
    $('#panel').css('right', mousePositionY);
});

提前致谢！

Answer 1

您当前的功能有几个问题，但它应该稍作修改。第一个问题：您将right css属性设置为clientY。它应该是top：

     $('#panel').css('top', mousePositionY);

然后你需要考虑#panel父母的位置来正确定位它。你可以这样做：

     //You should avoid showing the panel right under the mouse, because it'll mess
     //with your mouseout event since the #thumb will be hidden.
     //You can add 20 pixels to the position for example.  
     var mousePositionX = event.pageX-$('#panel').parent().offset().left+20;
     var mousePositionY = event.pageY-$('#panel').parent().offset().top+20;

也许您应该尝试将mousemove来电置于您的swThumbEffect功能中以及其他mouseevents来电。

通常它应该正常工作。

Answer 2

每次mousemove点火，（每秒5-10次）你必须更新你的元素位置。

这是我前几天写的代码：

http://jsfiddle.net/y5ua8n9f/

如果我稍后会有时间，我会在这里更新。

祝你好运！

javascript工具提示跟随光标位置

2 个答案: