1

我正在为图片创建缩放效果

    <table>
     <tr>
      <td><img class='source-img' src='a.png' ></td>
         20 more same TDs
     </tr>
       20 more TRs
    </table>

<div id="magnifier" style="position:absolute;"></div>

1- 缩放成功 2- 放大镜的顶部/左侧有一个问题，我将放大镜定位在 source-img 的右侧

 $("source-img").mousenter(function(){
   $("#magnifier").css({
     top: $(this).top,
     left:$(this).offset().left()+$(this).width()+5//to improve left value
   });
 });

问题：如果 source-img 在浏览器的最左侧，那么我想在 source-img 的右侧显示放大镜，反之亦然，bcz 现在显示最左侧的 source-img 放大镜但看不到。

4

1 回答 1

2

您将需要测试放大镜元素的位置及其宽度与窗口宽度，并相应地调整左侧位置。下面的示例伪代码应该可以帮助您。

$(".source-img").mouseenter(function(e) {
    var w = $(window),
        elWidth = $(this).width(),
        offset = $(this).offset(),
        left;

    if (elWidth + e.pageX > w.width() + w.scrollLeft()) {
        left = e.pageX - elWidth;
    } else {
        left = e.pageX;
    }

    $("#magnifier").css({
        top: offset.top,
        left: left
    });
});

如果需要，可以应用其他设置来设置放大镜的预定边距，以使其远离窗口边缘。

于 2012-10-10T04:15:09.763 回答