Question

我想放置一个以随机大小和随机位置随机淡入/淡出的div。

我可以通过淡入/淡出来随机显示三张图片，但我无法将它们放在随机大小的随机位置。

jquery的：

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>

Answer 1

这是我的解决方案。它允许您指定图像比例尺寸的范围，并确保无论比例如何，随机选择的位置都不会夹在容器外部。我希望这符合你的要求。

编辑：我已经更新了代码，以便非四边形图像现在也能保持它们的比例（如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>

如何淡入 - 用随机位置和随机大小淡出三张图像？

1 个答案: