javascript - 在固定区域随机移动图像

Question

我正在使用此代码在一个区域中随机移动图像。但我需要始终显示至少 3 张图像。这是我所做的:

HTML

<div class="fade">Image 1</div>
<div class="fade">Image 2</div>
<div class="fade">Image 3</div>
<div class="fade">Image 4</div>
<div class="fade">Image 5</div>
<div class="fade">Image 6</div>

jQuery

(function fadeInDiv() {
    var divs = jQuery('.fade');
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.fadeIn(Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.fadeOut(Math.floor(Math.random() * 1000), function() {
            elem.before('<div>&nbsp;</div>');
            fadeInDiv();
        });
    }
})();

此代码淡入和淡出图像随机结果一次显示 2 张图像，有时一次显示 1 张图像，有时显示 3 张图像。我需要每次使用淡入淡出功能显示 3 张图像和 6 张图像。

我的主页是这样的:

Image1          Image2


       Image3

我希望它看起来像:

       Image1

Image2        Image3

或

       Image1

       Image2  Image3

或带有此图像的任何其他图案

Answer 1

您需要使用 css 属性来更改它们在屏幕上的位置。

你必须精确他们的定位风格，IE absolute。

elem.css('top','15px') 和 elem.css('left','15px') 是移动对象的属性方法屏幕。您需要将 15px 调整为您需要的值。它相对于屏幕的左上角。

fadeIn/fadeOut 只改变屏幕上那些对象的不透明度属性。