0

我正在开发一个 100% 宽度的 Joomla 网站，它也是响应式的。

同时，我使用滑块（只是淡化效果）来显示多个图像，但问题来了。第一张图片（来自 CSS 背景）可以在移动设备上完美显示，但其他图片（来自 jQuery）则不能。

JS

$(document).ready(function(){
    var imgArr = new Array(
        'imatgesheader/fons2.jpg',
        'imatgesheader/fons3.jpg'
    );
     
    var preloadArr = new Array();
    var i;
     
    /* preload images */
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }
     
    var currImg = 1;
    var intID = setInterval(changeImg, 100);
     
    /* image rotator */
    function changeImg(){
        $('#gk-header').animate({opacity: 0.05}, 2000, function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') ');
        }).animate({opacity: 1}, 1000);
    }
});

CSS 样式

    #gk-header {
      background-image: url('../images/fons.jpg') ;
      background-size: cover;
      -moz-background-size: cover;  
      background-position: center; 
      margin-bottom:32px;
      padding:130px 0;
      -webkit-box-shadow:inset 0 0 3px #ebebeb;
      -moz-box-shadow:inset 0 0 3px #ebebeb;
      -ms-box-shadow:inset 0 0 3px #ebebeb;
      -o-box-shadow:inset 0 0 3px #ebebeb;
      box-shadow:inset 0 0 3px #ebebeb;
      z-index: 1;
    }

HTML

    <section id="gk-header">
        <div class="container-fluid">
            <jdoc:include type="modules" name="header" style="none" />
        </div>
    </section>

线索

我尝试使用此代码，但也不起作用。

 $(this).css('background-size','cover','url(' + preloadArr[currImg++%preloadArr.length].src +') ');
4

2 回答 2

0

检查这个修复，一个 IE 行为，增加了对 IE8 的背景大小的支持。

https://github.com/louisremi/background-size-polyfill

于 2013-10-23T13:27:16.733 回答
0

我为http://WorldViewClock.com做了类似的事情，这对我有用：

$(obj).css('background', 'url(https://s3.amazonaws.com/WVCRepo/w/' + locs[i] + '/1080/' + count[i] + '.jpg) no-repeat center center fixed');

#bgWrapper, #bgWrapper div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#bgWrapper {
.bgImg {
    -webkit-background-size: cover !important;
     -moz-background-size: cover !important;
         -o-background-size: cover !important;
                background-size: cover !important;
}
于 2013-12-06T00:06:52.180 回答