[英]Fade in background image on load
我想使用jquery加載一個隨機背景圖像。 下面是我正在使用的腳本,它顯示了刷新時的隨機背景,但沒有fadeIn效果。 如何創建fadeIn效果onload。 注意:我不想循環隨機圖像。
$(document).ready(function() {
var images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg', '06.jpg', '07.jpg', '08.jpg', '09.jpg', '10.jpg'];
$('.about').css({'background-image': 'url(../img/bg/' + images[Math.floor(Math.random() * images.length)] + ')'});
('.about').fadeIn(1000);
});
$(document).ready(function() { var images = ['http://funmozar.com/wp-content/uploads/2014/09/Beautiful-Yellow-Birds-06.jpg', 'http://petblaster.com/images/Birdwall.jpg', 'http://www.nscblog.com/wp-content/uploads/2014/04/birds-314989.jpg']; var url = images[Math.floor(Math.random() * images.length)]; var img = new Image(); img.onload = function(){ $('.about').css({'background-image': 'url('+url+')', 'background-size' : 'contain'}); $('.about').fadeIn(1000); } img.src = url; });
.about{ width: 400px; height: 400px; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="about"></div>
這將使用new Image
預加載圖像。 附加了一個onload
。 當他加載火力時,它會將背景設置為.about
div並將其淡入。
我已經改變了網址以實際顯示一些結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.