如何实施“智能”翻译：翻译？

Question

我不知道我可以如何在块中执行图像检查。

这很难解释，只需按照link自己看看。如果您向下滚动显示卡片，请等待几秒钟，您会看到该图像从他的起点出发，如此enter image description here 并且自行退出。

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

我的JavaScript代码：

"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 + ')'; 
 
      }; 
 
     });

我怎样才能解决这个问题？

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>