问浏览器的jquery屏幕(位置)
EN

Stack Overflow用户

提问于 2012-10-10 08:40:05

回答 1查看 139关注 0票数 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-放大镜的左上角有一个问题，那就是我已经将放大镜放置在源代码的右侧-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放大镜会显示，但看不到。

css

jquery

回答 1

Stack Overflow用户

发布于 2012-10-10 12:15:10

您将需要测试放大镜元素的位置和它的宽度与窗口宽度，并相应地调整左侧位置。下面的示例伪代码应该会对您有所帮助。

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12811170

复制

相似问题

问浏览器的jquery屏幕(位置)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浏览器的jquery屏幕(位置)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浏览器的jquery屏幕(位置)
EN