Question

我不知道如何在一个区块中执行图像检查。

很难解释，只需按照link进行操作即可。如果向下滚动到卡片，等待几秒钟，您将看到图像从其起点向外移动，如enter image description here 并留下了自己的空白。

我想解决这个问题，使图像不能超出自己的大小。

我的JavaScript代码：

＆＃13;

"use strict";
        var imgArr = document.getElementsByClassName('imgArr');

        [].forEach.call(imgArr, function(item, i, arr) {
            // set variables
            var randValWidth;
            var randValHeight;

            // take the width and height of each image
            var size = {
                'widthImg': arr[i].width,
                'heightImg': arr[i].height
            };

            // set time 
            setInterval(function() {
                // add arguments for tRand() and wRand()
                var randW  = tRand(-size.widthImg/4, size.widthImg/4);
                var randH  = wRand(-size.heightImg/4, size.heightImg/4);
                // start animation
                motionItem();
            }, 2000);

            // find a random value between min and max values
            function tRand(min, max) {
                randValWidth   = Math.floor(Math.random() * (max - min) + min);
            };
            function wRand(min, max) {
                randValHeight  = Math.floor(Math.random() * (max - min) + min);
            };

            // animate elements
            function motionItem() {
                arr[i].style.transform = 'translate3d(' + randValWidth + 'px,' + randValHeight + 'px,' + 0 + ')';
            };
        });

＆＃13;

我如何解决它？

Answer 1

它只是一个图像和CSS，不需要JavaScript。例如，框中包含的图像高度为100px，但图像的高度为200px，因此它们让图像在div中完整，然后使用将图像转换为图像以使其上下移动。

.box {
  width:900px;
  height:400px;
  background-color:blue;
}
.img {
  width:90%;
  height:auto;
  position:relative;
  animation:4s movingUp infinite linear;
  transition:4s;
}
@keyframes movingUp {
  0%{
    transform:translateY(0px);
  }
  25% {
    transform:translateY(50px);
  }
  50%{
    transform:translateY(100px);
  }
  75%{
    transform:translateY(-50px);
  }
  100% {
    transform:translateY(0px);
  }
}

<div class="box">
    <img class="img"src="http://res.cloudinary.com/dhue87np7/image/upload/v1508082124/sample.jpg" />
</div>

如何实施＆＃34; smart＆＃34;变换：翻译？

1 个答案: