单击图像后对其进行居中缩放(JQuery)

Question

我编写了一个jquery函数来缩放图像。第一行隐藏所有图像，最后一行缩放当前图像。在这中间，我写了基于逻辑的代码，用于在中心显示图像。但它不起作用，有人能帮忙吗？

$("img").animate({opacity: "0.001", left: '0px'})
var imgPosX = ( $(window).width() - $("this").width() )/2; 
var imgPosY = ( $(window).height() - $("this").height() )/2; 
$(this).css({"top": imgPosY+"px", "left": imgPosX+"px"}); 
$(this).animate({opacity:"1", zoom: '150%'}, 'medium');},

Answer 1

移除this:周围的"

var imgPosX = ( $(window).width() - $(this).width() )/2;
var imgPosY = ( $(window).height() - $(this).height() )/2;

this是JavaScript中的关键字，而不是字符串。

Answer 2

我建议使用jQuery插件，因为它们很容易找到，而且几乎可以满足您的任何要求。看看这个例子，看看可能的替代方案。这还有一个额外的优势，当你把鼠标放在上面时，你可以有缩略图并加载完整的照片(避免必须一次下载所有全尺寸的图像)。

Answer 3

不要更改顶部和左侧，而是尝试左侧边距和右侧边距

Answer 4

尝试此工作演示

$(function(){
$("img").css({opacity: "0.001", left: '0px'});
objthis= $("img").eq(0);
var imgPosX = ( $(window).width() - objthis.width() )/2; 
var imgPosY = ( $(window).height() - objthis.height() )/2; 
objthis.css({"position":"relative","top": imgPosY+"px", "left": imgPosX+"px"}); 
objthis.animate({opacity:"1", zoom: '150%'}, 'medium'); 
});