Javascript 现场球赛，缩放问题，jQuery

我正在尝试在球赛中创建一个点，因此最终将是一个球员踢球的图像，但球已被移除，球员需要单击球应该在哪里

第一个版本运行良好，效果良好

但我需要添加的是某种缩放，以便您可以更准确地看到单击的位置。我一直在胡闹，想出了这个主意

但是一旦你点击它，放大时看起来很棒，但是当你回到图像时，它就消失了

我认为这是如何设置图像的问题，网页是图像原始大小的一半，视网膜使用图像的全部大小

---

有什么帮助吗？

看起来您正在通过缩放图像的左上角单击点来突出显示您单击的位置。您需要做的是根据鱼眼是否在图像上方改变上/左位置

未缩放的图像必须是新闻页面的一部分，还是可以是独立的图像

如果它可以是独立的，那么解决方案应该非常简单。如果放大图像的大小是未缩放图像的两倍，则在查看未缩放图像时，可以将高光的上/左值设置为已缩放图像值的一半

Jquery position将允许您准确地获取位置

---

第一个问题是您没有正确设置视网膜背景位置

此代码有效我添加了一个缩放变量，以明确更改缩放将如何更改计算，但它也需要其他更改：

/*  Moving the retina div with the mouse
    (and scrolling the background) */
zoom = 2.0;
retina.css({
    left        : left - sizes.retina.width/2,
    top     : top - sizes.retina.height/2,
    backgroundPosition : ""+(-zoom*left+sizes.retina.width/2)+'px '+(-zoom*top+sizes.retina.height/2)+'px'
});

通过检查所有四个角在视网膜中是否都被正确看到来测试这一点，即当你在主图像的角上时，角应该在视网膜圆的中心

第二个问题是，如果调整浏览器的大小，位置计算将被取消，因为偏移变量未更新为新的大小。一种简单的方法是将其作为webpage.mousemove的第一行，以便每次更新偏移量：

var offset  = { left: webpage.offset().left, top: webpage.offset().top };

---

望远镜的中心并非直接位于其下方图片像素的顶部。e、 g.如果你选择图像的中心，效果很好，但是试着选择左上角的开关切换到全局版-你不能，因为它永远不会在望远镜中心下。那么，实现我想要做的事情的最佳方法是什么？我不确定切换到全局版意味着什么？切换到全局版是指示例图像左上角桃红色背景上的文本。至于要做什么，我会尝试调整页面上使用的逻辑，以确保缩放区域正好位于您要放大的像素上方。感谢James，我要根据鱼眼改变顶部/左侧多少？这就是我面临的问题。它不一定是它的一部分，如果你看看我的原始演示，我只是想给它添加一个鱼眼。有什么想法吗？