Question

我目前正在使用jquery库使用javascript编写旋转木马。基本上，显示了三个图像，中心图像比另外两个图像大。向左或向右移动时，中央图像的大小从115px * 115px调整为50px * 50px并向左或向右倾斜，具体取决于用户输入。

问题在于，当调整大小时，中心图像会逐渐裁剪，直到达到50px * 50px，然后返回到更正常的状态： http://www.filedropper.com/imggetscropped

Javascript如下：

$("div#carousel .item:eq(2)").animate({'width':'50px', 'height':'50px', 'opacity':'0.5'}, {queue:false, duration:900});  
$("div#carousel .item:eq(2) img").animate({'width':'50px', 'height':'50px', 'marginTop': '30px'}, {queue:false, duration:900});  
$("div#carousel .item:eq(1)").animate({'width':'115px', 'height':'115px', 'opacity':'1'}, {queue:false, duration:900});  
$("div#carousel .item:eq(1) img").animate({'width':'115px', 'height':'115px', 'marginTop': '0px'}, {queue:false, duration:900});  
$("div#carousel .item:not(eq(2))").animate({'left':'+=56px'}, {queue:false, duration:900});  
$("div#carousel .item:eq(2)").animate({'left':'+=122px'}, {queue:false, duration:900, complete: carousel.toggleInput});

使用的图像是透明度的png。

Answer 1

从这段代码中，看起来你的图像在容器中

如果是这种情况，也许您可以调整容器的大小，但不能调整图像本身。

如果容器溢出，这会导致裁剪：隐藏;在css

但是要确保我们需要查看与此代码一起使用的css和基本html结构

jquery .animate - 在动画期间图像被裁剪

1 个答案: