0

フェードインとフェードアウト効果を使用して変化し続ける背景に完全な画像を含む Web サイトを作成しています。ここに私のスクリプトコードがあります

    $(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 関数を呼び出すことです。

私を助けてください...

4

1 に答える 1

1

jQuery バックストレッチはあなたの友達です: http://srobbin.com/jquery-plugins/backstretch/

于 2012-09-06T10:02:54.450 に答える