在加载时淡入背景图像

胡拉姆

我想通过使用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连接。当他上载射击时,它将背景设置为.aboutdiv并使其淡入。

我已经更改了网址以实际显示一些结果。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章