jquery – 如何淡化循环背景图像？

新手在这里..我正在努力让我的静态背景变成旋转木马……我现在的html看起来像这样：

<body>
    <div class="pageContent">
    </div>
</body>

和我的CSS：

body {
    background: url('http://placehold.it/1600x1200') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

所以我想让背景现在循环图像并保持响应.这可以使用CSS3轻松完成吗？或者我应该将我的html内容包装在带引导程序的旋转木马中？我无法找到如何做到这一点的好例子.提前致谢.

解决方法

jsBin demo

我会使用覆盖身体的绝对定位DIV来做到这一点.
使用新图像淡入DIV,然后将相同的图像设置为正文并隐藏DIV,如：
(灰色是身体,SOrange是DIV)

通过预先递增计数器来实现当前图像阵列的增量.

使用剩余运算符％可以实现循环修复,以防止计数器超出Array中的图像数量.

循环本身是在.fadeTo()回调函数内完成的,只需执行loopBg()函数的新迭代即可.

这是需要的CSS：

*{margin:0;padding:0;} /* Global reset */
html,body{height:100%;width:100%;}
body,#bg{ background: #000 none 50% / cover; }
#bg{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
}

和jQ：

var images = [
  "bg0.jpg","bg1.jpg","bg2.jpg"
];
var $body = $("body"),$bg = $("#bg"),n = images.length,c = 0; // Loop Counter
 
// Preload Array of images...
for(var i=0; i<n; i++){
  var tImg = new Image();
  tImg.src = images[i];
}
 
$body.css({backgroundImage : "url("+images[c]+")"}); 
 
(function loopBg(){
  $bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200,1,function(){
    $body.css({backgroundImage : "url("+images[c%n]+")"}); 
    loopBg();
  });
}());

编辑：如果你想保持背景改变但是可以滚动内容,只需添加overflow：auto;到这个演示中的#page：http://jsbin.com/huzayiruti/1/

jquery – 如何淡化循环背景图像？

解决方法

猜你在找的jQuery相关文章