Question

我正在创建一个网站，其背景上有完整的图像，使用fadein和fadeout效果不断变化。这是我的脚本代码

    $(document).ready(
            function(){

                $('div#homeGalleryImg').innerfade({
                    speed: 1500,
                    timeout: 5000,
                    type: 'sequence',
                    containerheight: '220px'
                });


        });

我的html代码是

<div class="fullScreen" id="homeGalleryImg">
    <img src="images/home1.jpg" class="fullImage" />
    <img src="images/home2.jpg" class="fullImage" />
    <img src="images/home3.jpg" class="fullImage" />
</div>

现在我想使用图像调整大小来创建一个函数

 cFns.push(function(){


 resizeFullScreens = function() {

    var minSizeX    = window.getScrollWidth();
            var minSizeY    = window.getSize().y;
            var deferResize = Browser.ie;

            $$('.fullScreen').setStyle('height', minSizeY + 'px');

            var resize = function() {
             minSizeY      = window.getScrollHeight();
             $$('.fullScreen').setStyle('height', minSizeY + 'px');

             $$('.fullImage').each(function(item, index) {
                 var c = item.getCoordinates();
                 var iR = c.width/c.height;

                 if ( minSizeX/minSizeY > iR ) {
                     iW = minSizeX;
                     iH = minSizeX/iR;
                 } else {
                     iH = minSizeY;
                     iW = minSizeY*iR;
                 }

                 item.setStyles({
                     'height': iH + 'px',
                     'width': iW + 'px'
                     });

                 item.setPosition({
                        x: -(iW - minSizeX) / 2,
                        y: -(iH - minSizeY) / 2
                    });
                });
            }

            if (deferResize) {
                resize.delay(50);
            } else {
                resize();
            }
        }

    window.addEvent('resize',resizeFullScreens);
  });

并在每次加载时调用此函数并调整大小

    cFns.push(function() {
    window.addEvent('resize', resizeFullScreens);
    window.addEvent('load', resizeFullScreens); 
     });

现在它工作正常但是当背景图像发生变化时，因为我在这里使用内部淡入淡出效果，新图像无法根据浏览器尺寸调整大小。我想要的是在背景图像改变时调用resizeFullScreens函数。

请帮帮我......

Answer 1

jQuery Backstretch是你的朋友：http://srobbin.com/jquery-plugins/backstretch/

完整的背景图像与fadein淡出效果

1 个答案: