我想通过使用jQuery加载随机背景图像之一。下面是我正在使用的脚本,它显示了刷新时的随机背景,但没有fadeIn效果。如何创建onload的fadeIn效果。注意:我不想循环随机图像。
$(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并使其淡入。
我已经更改了网址以实际显示一些结果。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句