如何在 jquery 中从中间缩放我的图像？

Question

我想从中间缩放我的 img。现在它是从左上角开始的。这是我的代码：

$( document ).ready(function() {
    $("#logo").animate({
        height: '+=100%',
        width: '+=100%'
    });

});

#logoblock
{
    position: relative;
    width: 700px;
    height: 700px;
    margin: auto;
}
#logo
{
    position: absolute;
    width: 0%;
    height: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="logoblock">
    <div id="logo">
    <img src="http://placehold.it/700x700">
    </div>
</div>

这可能吗？

Answer 1

我认为您可以添加额外的动画方向：从初始中心位置 (left: 50%、top: 50%) 到 left: 0 和 top: 0。可能是这样的：

$(document).ready(function() {
    $("#logo").animate({
        height: '+=100%',
        width: '+=100%',
        left: '0',
        top: '0'
    });
});

#logoblock {
    position: relative;
    width: 700px;
    height: 700px;
    margin: auto;
}
#logo {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="logoblock">
    <div id="logo">
    <img src="http://placehold.it/700x700">
    </div>
</div>

Answer 2

您不需要 JavaScript 来执行此操作。您可以只使用 CSS 个动画，如下所示：

#logoblock{
    position: relative;
    width: 700px;
    height: 700px;
    margin: auto;
}

#logo{
    position: absolute;
    width: 0%;
    height: 0%;
}

#logo img {
  -webkit-animation: scaleImage 1s both;
          animation: scaleImage 1s both;
}

@-webkit-keyframes scaleImage {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scaleImage {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

<div id="logoblock">
    <div id="logo">
    <img src="http://placehold.it/700x700">
    </div>
</div>

Answer 3

如果您不想更改 CSS 而只想更改 jQuery，您可以这样做

CSS:

#logo img { 
     -webkit-transform: scale(0) 
     -moz-transform: scale(0); 
     -ms-transform: scale(0); 
     -o-transform: scale(0);
        transform:scale(0);
     -webkit-transition: all 0.8s ease; 
     -moz-transition: all 0.8s ease; 
     -ms-transition: all 0.8s ease; 
     -o-transition: all 0.8s ease;
      transition: all 0.8s ease;
 }

jQuery:

    var val = 1;
    $('img').css({
        '-webkit-transform': 'scale(' + val + ')',
        '-moz-transform': 'scale(' + val + ')',
        '-ms-transform': 'scale(' + val + ')',
        '-o-transform': 'scale(' + val + ')',
        'transform': 'scale(' + val + ')'
    });

并且通过更改 transition-duration 您可以 increase/decrease 缩放延迟。

这里我还创建了一个JSFiddle

Answer 4

试试这个代码 .thumb { display: inline-block;宽度：200px；高度：200px；边距：5px；边框：3px 实心#c99；背景位置：中心中心；背景大小：覆盖；}

如何在 jquery 中从中间缩放我的图像？

How to scale my image from the middle in jquery?

html

javascript

css

scale