我想放置一个随机大小和随机位置的随机淡入/淡出的 div。
我可以通过淡入/淡出随机显示三张图像,但我无法将它们随机放置在随机位置。
http://jsfiddle.net/qq68m/139/
j查询:
jQuery(function(){
function random(n) {
return Math.floor(Math.random() * n);
}
var transition_time = 2500;
var waiting_time = 100;
var images = $('div#block img');
var n = images.length;
var current = random(n);
images.hide();
images.eq(current).show();
var interval_id = setInterval(function () {
images.eq(current).fadeOut(transition_time, function () {
current = random(n);
images.eq(current).fadeIn(transition_time);
});
}, 2 * transition_time + waiting_time);
})
html:
<div id="block">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand1.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand2.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand3.png">
</div>
最佳答案
这是我的解决方案。它允许您指定图像比例大小的范围,并确保无论比例如何,随机选择的位置都不会裁剪到容器之外。希望这能满足您的要求。
编辑:我更新了代码,现在非四边形图像也将保持它们的比例(如 Phil Murray 示例所示)。
如果通过 css 高度/宽度设置大小对您不起作用,也许使用 CSS3 scaleX/scaleY 属性可能会给您带来更平滑的图像缩放结果。
如果您有任何其他问题,请在此帖子评论中提问。
jQuery(function(){
function random(n) {
return Math.floor(Math.random() * n);
}
var transition_time = 200;
var waiting_time = 100;
var images = $('div#block img');
var n = images.length;
var current = random(n);
images.hide();
images.eq(current).show();
//get the size of the container
var boxHeight = document.getElementById('block').offsetHeight;
var boxWidth = document.getElementById('block').offsetWidth;
//range of possible image scales
var objectMaxHeight = 60;
var objectMinHeight = 20;
var interval_id = setInterval(function () {
images.eq(current).fadeOut(transition_time, function () {
current = random(n);
//gets reference to selected image
var $domImage = images.eq(current);
//generates random heights and widths for the image to be shown in
var generatedHeight =
Math.floor(
Math.random() * (objectMaxHeight - objectMinHeight)
) + objectMinHeight;
// assigns values to the image
$domImage.css('height', generatedHeight);
$domImage.css('width', "auto");
var imageAutoWidth = $domImage.width();
var generatedYLocation = Math.floor(
Math.random() * (boxHeight - generatedHeight + 1)
) + 0;
var generatedXLocation = Math.floor(
Math.random() * (boxWidth - imageAutoWidth)
) + 0;
$domImage.css('top', generatedYLocation);
$domImage.css('left', generatedXLocation);
$domImage.fadeIn(transition_time);
});
}, 2 * transition_time + waiting_time);
})
#block {
position: fixed;
width: 300px;
height: 300px;
border: 1px solid red;
background: yellow;
overflow: hidden;
}
img {
position:relative;
top: 0;
left: 0;
height: 100px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand1.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand2.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand3.png">
<img src="https://www.fillmurray.com/g/200/500">
<img src="https://www.fillmurray.com/g/500/200">
</div>
关于javascript - 如何淡入 - 淡出随机位置和随机大小的三个图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44904259/