如何從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

你不需要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 2

我想你可以添加額外的動畫方向：left: 0和top: 0從最初的中心位置（left: 50%，top: 50%）。也許是這樣的：

$(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 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：

而通過更改transition-duration，您可以增加/減少縮放延遲。

在這裏，我還創建了一個JSFiddle

Answer 4

試試這個代碼.thumb {顯示：inline-block的;寬度：200px; height：200px; margin：5px; border：3px solid＃c99; background-position：center center; background-size：cover;}