如何實施「智能」翻譯：翻譯？

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>