0

別々のページに同じdivが2つあります-開始位置のランディングページから2ページ目の位置までアニメーション化し、最初のコンテンツdiv（青）を開く方法はありますか？基本的に左にアニメーション化して垂直にします立方体の代わりに線。

だからここからhttp://www.crazyedits.co.uk/

ここhttp://www.crazyedits.co.uk/home.php#に移動し、最初の色付きのdivを開きますか？

私は学び始めたばかりなので、簡単に覗いてみてください（私の質問が明白な場合は申し訳ありません）-しかし、解決策を見つけるために5時間試しましたが、何も機能しないようです。

ランディングページボタン

<div class="button1">
    <div id="icon"><img src="Images/home.png" width="200" height="160" /></div>
    <div id="title">HOME</div>
</div>

コンテンツページボタン

<div>   <div class="content_button1">
    <div ="icon"><a href="#home_page" ><img src="Images/home.png" width="200" height="160" style="border:none;" /></a></div>
    <div id="title"><li><a href="#home_page" >HOME</a></li></div>
    <div id="home_page" class="contain"></div> </div>
</div>

CSS

私が抱えている問題は、各ページのボタンに2つの異なるcssセットを設定する必要があることだと思います。1つはボタンを中央に配置し、もう1つは左に配置します。したがって、同じクラスを使用しても、4をそのまま正方形に入れて、絶対位置と関係がある場合は、それを機能させるための一歩になります。

/******page buttons*******/

.content_button1{width:199px; height:199px; margin:0px 0px 19px 0px; background-color:#09C;} 
.content_button2{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#C00;} 
.content_button3{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#F60;} 
.content_button4{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#093;} 

/*****landing page buttons*****/

.button1{width:199px; height:199px; float:left; margin:20px ; background-color:#09C;} 
.button2{width:199px; height:199px; float:left; margin:20px ; background-color:#C00;} 
.button3{width:199px; height:199px; float:left; margin:20px ; background-color:#F60;} 
.button4{width:199px; height:199px; float:left; margin:20px ; background-color:#093;}
4

2 に答える 2

0

これをチェックしてください：JSFIDDLE

CSS

.button {width:199px; height:199px; position:absolute}
#top-left {background-color:#09C;} 
#top-rite {background-color:#C00;}
#bot-left {background-color:#F60;}
#bot-rite {background-color:#093;}

#top-left.pos  {left:50%; margin-left: -110px; top:0px; }
#top-rite.pos  {left:50%; margin-left: 110px; top:0px; }
#bot-left.pos  {left:50%; margin-left: -110px; top:220px; }
#bot-rite.pos  {left:50%; margin-left: 110px; top:220px; }​

左に移動する位置を簡単に取得できるように、クラスと ID がどのように構造化されているかがわかります。滑らかなアニメーション効果が必要な場合は、これを見たいと思うかもしれません: http://api.jquery.com/animate

JQuery

$(document).ready(function(){
    $('.button').click(function(){

        $('#center_content').css('margin-top','0');
        $('#top-left').css('left','0').css('margin-left','0').css('top','10px');
        $('#top-rite').css('left','0').css('margin-left','0').css('top','220px');
        $('#bot-left').css('left','0').css('margin-left','0').css('top','430px');
        $('#bot-rite').css('left','0').css('margin-left','0').css('top','640px');
    });        
});​
于 2012-10-29T22:06:10.443 に答える
0

ページ 2 はブラウザーに読み込まれ、アニメーションは JS 経由で行われるため、実際には 2 つのページ間でアニメーションを作成することはできません。最善の解決策は、あなたのものを単一のページにまとめ、絶対位置で遊ぶことです。

少し複雑なコードを書きますが、すべてを説明するためにたくさんコメントしました。

4 つの正方形は最初にページの中央に配置され、ウィンドウのサイズを変更すると再配置されます。

次に、4 つの正方形のいずれかをクリックすると、アニメーションが開始され、対応するコンテンツが表示されます。

その後、別の四角をクリックすると、対応するコンテンツが表示されます。

幸運を ！

http://fiddle.jshell.net/4SZXT/11/ <-- コードはこちら

于 2012-10-29T22:57:50.747 に答える