Question

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

    <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-缩放成功完成放大镜的顶部/左侧有两个问题那就是我把放大镜放在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现在为最左边的源-img放大镜显示但是无法看到

Answer 1

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

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

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

浏览器的jquery屏幕（位置）

1 个答案: