时间戳

首页 > 解决方案 > 缩放图像以在页面加载时增长

javascript - 缩放图像以在页面加载时增长

问题描述

我环顾四周寻找解决方案，并遇到了这个问题/答案在图像加载时将图像从零放大到全尺寸 但是，这并没有给我太多帮助来扩大规模。

到目前为止，我得到的壁橱在下面，它在JSFiddle中。我试图让我的形象在短时间内扩大/增长。

提前致谢。

$("img").load(function() {
  $(this).addClass("loaded");
});
img {
  height: 300px;
  width: 500px;
  margin: 100px;
  transition: transform 5.5s;
  transform: scaleX(0.5) scaleY(0.5);
}

img.loaded {
  transform: scaleX(1) scaleY(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681">

标签： javascriptjquery

解决方案

问题是类在加载后没有添加到您的图像标签中。

jQuery 未加载到您的页面。

尝试使用 javascript

var images = document.getElementsByTagName("img");
var i;

for(i = 0; i < images.length; i++) {
    images[i].className += " loaded";
}

工作演示：https ://jsfiddle.net/malithmcr/cewjzdrn/1/

推荐阅读