1

それぞれに 3 つの画像を含む、絶対配置された div のグリッドがあります。これらの画像は、クラス (.z1、.z2、および .z3) を介して設定された z-index を使用して互いに積み重ねられます。

div を配列に選択し、div をシャッフルしてランダム化します。

.animate を使用して最初の画像を「反転」し、2 番目の画像を表示します。(.z3 は非表示) 次に、これらの div をループしてクラスを切り替えます。z1 は z3 (下部) になり、z3 は z2 (現在は中央) に移動し、z2 は z1 になります。

これはほとんどの場合機能しますが、div 内の画像がまったく表示されないという一見ランダムに見える問題が発生することがあります。

私は jQuery の slideToggles 以外にはほとんど役に立たないので、助けていただければ幸いです。

HTML

<div class="grid"> 
     <div class="r1 c1">
         <img src="<?=$grid->image_1_1->getPath()?>" width="149" height="104" class="z1" alt="">
         <img src="<?=$grid->image_1_2->getPath()?>" width="149" height="104" class="z2" alt="">
         <img src="<?=$grid->image_1_3->getPath()?>" width="149" height="104" class="z3" alt="">
     </div>
     <div class="r1 c2">
         <img src="<?=$grid->image_2_1->getPath()?>" width="137" height="104" class="z1" alt="">
         <img src="<?=$grid->image_2_2->getPath()?>" width="137" height="104" class="z2" alt="">
         <img src="<?=$grid->image_2_3->getPath()?>" width="137" height="104" class="z3" alt="">
     </div>

グリッドにはこれよりも多くの div がありますが、レイアウトはすべて同じです。r1/c1 クラスは、top: と left: の単なる位置です。

jQuery

//Find all sub divs in the grid and trigger the flip on them (in order currently)
function begin() {
    var index = 0;

    window.setInterval(function() {
        var divs = $('div.grid div');

        divs.sort(function() { return 0.5 - Math.random();});

        flip(divs[index]);

        if(++index == divs.length)
            index = 0;

    }, 1000);
}
//homepage grid animation
function flip(targetDiv) {

    //Function begins gather variables      
    // All images inside target div are same size

    var currWidth= $(targetDiv).children('img:eq(0)').width();
    var currHeight= $(targetDiv).children('img:eq(0)').height();
    var currMargin = currWidth/2;

    //Remove .z3 - the "bottom" image so that it is not seen during flip
    $('img.z3').width('auto').hide();
    $('img.z2, img.z1').css('margin-left', 0).show();

    // The Animation
    $(targetDiv).children('img.z2').stop().css({width:0,height:''+currHeight+'px',marginLeft:''+currMargin+'px',opacity:'1'});

    $(targetDiv).children('img.z1').stop().animate({width:0,height:''+currHeight+'px',marginLeft:''+currMargin+'px',opacity:'1'},
        {duration:1000});
    $(targetDiv).children('img.z2').stop().animate({width:+currWidth,height:''+currHeight+'px',marginLeft:0,opacity:'1'},
        {duration:1000});

    //Swap classes
    $(targetDiv).children('img').each(function () {
        var $self = $(this);

        if ($self.hasClass('z1')) {
            $self.removeClass('z1').addClass('z3');
            $self.width(currWidth);
        } else if ($self.hasClass('z2')) {
            $self.removeClass('z2').addClass('z1');
        } else if ($self.hasClass('z3')) {
            $self.removeClass('z3').addClass('z2');
        }
    });

    //Trying to combat items with 0px width on second run through
    //$(targetDiv).children('img').width(currWidth);
}

//Trigger Rotation
begin()

残念ながら、私のページはクライアント ピースでプライベート サーバー上にあるため、リンクを投稿することはできませんが、ご意見をお聞かせいただければ幸いです。

ありがとう

4

1 に答える 1

0

通常、送信するとすぐに解決しましたが、

問題は私のbegin関数にありました。

一度ではなく、間隔が実行されるたびにdivの配列を取得してループしていました。

div 選択を window.interval の外に移動すると、問題が修正されました。

于 2012-12-18T10:17:03.260 に答える