0

iPad用に作成されたサイト内のスライドの構造は次のとおりです。

<div id="slide4">
    <div class="slide4A1"></div>
    <div class="slide4A2"></div>
    <div class="slide4A3"></div>
</div>

各ブロックには、Ipadが縦向きか横向きかに関係なく、画面全体に表示できるようにメディアクエリを介して制御される背景画像が含まれています。

ブロックをアニメーション化する必要がありますが、位置を次のようにします-

.slide4A1-固定左.slide4A2-固定中央.slide4A3-固定右

スライド1と3で左右にフローティングし、自動マージンで中央に配置しようとしましたが、レイアウトが間違っています-何かアイデアはありますか？

ここにjsフィドル-http ://jsfiddle.net/chunk_pd/PAqSb/6/

4

3 に答える 3

1

私はこれがあなたが見ることを期待したものだと信じています：

CSS：

#slide4 {position: relative; }
.slide4A1, .slide4A3{ position:absolute; top: 0; }
.slide4A1{background:#000;  width:120px; height:1024px; left:-120px;}
.slide4A2{background:#367ab2; width:531px; height:1024px; margin-left:auto; margin-right:auto; position:relative!important; display: none;}
.slide4A3{background:#ff7e00; width:120px; height:1024px; right:-120px;}

JS：

function goDown3bPt2(){
                $('.slide4A1').animate({left:'0',}, 1600);
                $('.slide4A2').fadeIn('slow');
                $('.slide4A3').animate({right:'0',}, 2100);

        }

jsfiddleを更新しました。

于 2013-01-17T11:55:38.657 に答える
1

まず、CSSをクリーンアップする必要があります-結合するposition: absolute;と機能しfloatません。ラッパーを使用して、<div id="slide4">その位置を相対およびに設定しますwidth: 100%。position: absolute; top: 0px;ラッパーの先頭に到達するには、両方のアニメーションdivが必要です。

さらに、JSにタイプミスがあります。

$('.slide4A1').animate({left:'0px;',}, 1600);削除するだけです; 後0pxと出来上がり。

于 2013-01-17T12:14:43.890 に答える
0

幅：100％、マージン：0自動をslide4に適用幅：33％をslide4A1、slide4A2、slide4A3に適用

左にフロートしてslide4A1に、右にフロートしてslide4A3クラスに.... !!

于 2013-01-17T11:21:59.340 に答える