如何将图像隐藏到图像的中心点答案

【问题标题】：How to hide image to centre point of the image如何将图像隐藏到图像的中心点
【发布时间】：2014-01-27 09:46:14
【问题描述】：

我有一个问题，我想在图像的中心点显示/隐藏图像。

我用过类似的jquery animate函数

  $("someId").animate({width:"hide"},300);

它将图像从右下角隐藏到左上角。我想将图像隐藏到图像的中心点。

【问题讨论】：

这句话我想在图像的中心点显示/隐藏图像。没有意义。你能澄清一下吗？
如果我为图像设置动画，动画会向左上角移动。我想要图像中心点的隐藏效果。例如：如果图像大小为 100 像素 X 100 像素。效果应该朝向点 50px X 50Px
我认为暮光之城有你的解决方案。您需要使用 div 并将其缩小。

标签： jquery html css image

【解决方案1】：

如果你没有使用标签，而是使用图像作为 div 的背景。

您可以使用 css 设置背景：background: url(...) no-repeat center center。而当你通过缩小隐藏 div 时，图像会居中。

【讨论】：

@Abhiram 那么那会有点复杂。您需要用 div 包装图像，并在该 div 上设置overflow:hidden。然后你在img上设置position:relative。最后，当您制作动画时，在 ing 上使用 {left:-$("someId").width() / 2} 而 {width:"hide"} 转到 div。您必须确保包装 div 在未隐藏时与图像具有相同的尺寸。

【解决方案2】：

尝试JqueryUI effect达到你的预期效果，使用规模效应

DEMO

$('button').click(function(){
    $('img').hide("scale",1000);
});

【讨论】：

加载到服务器时闪烁。所以，我用 TweenMax 来解决这个问题

【解决方案3】：

我推荐一个 CSS hack。将图像标签的边距设置为 -50% 以使其没有宽度，然后将其位置设置为绝对并将顶部和左侧设置为 50%。这使图像在其父元素中居中。我建议缩小父元素并将溢出设置为隐藏。

详情：

<div id="wrapper">
    <img id="picture" />
</div>

CSS：

#wrapper{
    overflow: hidden;
}

#picture{
    margin: -50%;
    position: absolute;
    left: 50%;
    top: 50%;
}

您还需要将默认包装器设置为图像的大小。它是图像的假剪贴蒙版，它不知道它需要多大。

【讨论】：

【解决方案4】：

我通过像这样使用 TweenMax.js 解决了这个问题

 var w = $("#someId").position().left + ($("#physical"+i).width()/2);

 var h = $("#someId").position().top +  ($("#physical"+i).height()/2) ;

 TweenMax.to( $("#someId"),1,{ css:{width:0,height:0,left:w,top:h} } );

【讨论】：