如何实现“智能”转换:翻译？
如何实现“智能”转换:翻译？
提问于 2017-10-15 22:25:39
我不知道如何在一个块中执行图像检查。
这很难解释，只要跟随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 + ')';
};
});
我怎么才能修复它？
回答 1
Stack Overflow用户
发布于 2017-10-16 00:00:00
这只是一张图片和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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46756099
复制相关文章
相似问题
腾讯云开发者
