Question

我试图从头开始做这件事。

我的想法是将弹出窗口设置为悬停在图像上的较大版本。然后将背景图像移动到构成单个精灵图像的图像片段集合中。

我不确定我是否遗漏了什么。现在通过这个演示，我试图通过使用z-index来隐藏图像的其余部分，但它似乎并没有起作用。

有110行代码，所以我只是张贴了一个有用的演示链接，如果这样做的话。

Working demo

这是主要的驱动程序代码

这位于mouseover标记内的mousemove标记内

这个想法是当你将鼠标悬停在图像上时，会更新坐标x / y（我做的第一步是获取x，y坐标），然后将图像附加一次，将附加图像设置为绝对定位，然后创建一些变量，现在坐标代表正在移动的图像的中心，映射到悬停在小图像上的光标。

鼠标输出时

重置。

<script>
$("#coordinates").empty();
        $("#coordinates").append('x: ' + event.clientX + ' ' + ',' + 'y: ' + event.clientY + ' ');

        // append image
        if(imageAppended == "none") {
          $("#zoomed-in").append('<img id="image" src="nicephoto.jpg" width="600px" height="auto" />');
          imageAppended = "yes";
        }
        // set background image
        $("#image").css({
          'position' : 'absolute'
        });

        // hover image coordinates
        var imagePosition     = $("#image-container").position();
            imagePositionTop  = imagePosition.top,
            imagePositionLeft = imagePosition.left,
            imageWidthOffset  = ( ( $("#image").width() ) /2 ),  // move image by center
            imageHeightOffset = ( ( $("#image").height() ) /2 ); // move image by center

        // move the image
        $("#image").css({
          'top' : (event.clientY)-imagePositionTop-imageHeightOffset,
          'left' : (event.clientX)-imagePositionLeft-imageWidthOffset
        });
</script>

Answer 1

我不确定是否关注了您，但尝试在overflow:hidden上设置#zoomed-in。

Javascript image-hover-zoom弹出窗口

1 个答案: