![](/img/trans.png)
[英]How do I select three images at random and then fade them out with a new image?
[英]How to fade in - fade out three images with random place and random size?
我想放置一個隨機大小和隨機位置隨機淡入/淡出的 div。
我可以用淡入/淡出隨機顯示三個圖像,但我不能將它們隨機放置在隨機大小的地方。
http://jsfiddle.net/qq68m/139/
查詢:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.