我正在使用此代码在一个区域中随机移动图像。但我需要始终显示至少 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> </div>');
fadeInDiv();
});
}
})();
此代码淡入和淡出图像随机结果一次显示 2 张图像,有时一次显示 1 张图像,有时显示 3 张图像。我需要每次使用淡入淡出功能显示 3 张图像和 6 张图像。
我的主页是这样的:
Image1 Image2
Image3
我希望它看起来像:
Image1
Image2 Image3
或
Image1
Image2 Image3
或带有此图像的任何其他图案
最佳答案
您需要使用 css 属性来更改它们在屏幕上的位置。
你必须精确他们的定位风格,IE absolute。
elem.css('top','15px')
和 elem.css('left','15px')
是移动对象的属性方法屏幕。您需要将 15px
调整为您需要的值。它相对于屏幕的左上角。
fadeIn
/fadeOut
只改变屏幕上那些对象的不透明度属性。
关于javascript - 在固定区域随机移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30843959/