0

ナビゲーション ボタンとして機能する 3 つの円形の画像を含むページを作成しようとして、アニメーションとページ遷移を試しています。それらのいずれかをクリックすると、円が拡大してページ全体を埋め、それによってその背景になります。

4

3 に答える 3

0

あなたが説明しているものに似たものの小さなモックアップをまとめて、あなたが始められるようにしました. このソリューションには jQuery と jQuery UI が必要であり、基本的にアニメーションを作成して円形のDIV要素を膨らませてページ全体を埋めます。

HTML:

<div class="circle">
    <div>RED Contents go here!</div>
</div>
<div class="circle">
    <div>GREEN Contents go here!</div>
</div>
<div class="circle">
    <div>BLUE Contents go here!</div>
</div>

CSS:

.circle {
    display: inline-block;
    position: absolute; left: 50%; top: 50%;
    height: 50px; width: 50px;
    margin: -25px 0 0 -25px;
    cursor: pointer;
    border-radius: 25px;
    z-index: 0;
}
.circle:nth-child(1) { background: red; margin-left: -80px; }
.circle:nth-child(2) { background: green; }
.circle:nth-child(3) { background: blue; margin-left: 30px; }
.circle > div { display: none; }
.circle.expanded > div { display: block; }

jQuery:

$('.circle').on('click', function() {
    var $this = $(this);
    $this.css('z-index', 2)
    .siblings('.circle').removeClass('expanded').css('z-index', 1);
    $this.animate({
        left: 0, top: 0, margin: 0, 
        width: '100%', height: '100%',
        'border-radius': 0, padding: '60px 5px 5px 5px'
    }, 1000).addClass('expanded');
    $this.siblings('.circle').animate({
        left: 0, top: 0, height: 50, width: 50,
        'border-radius': 25, padding: '0'
    }).first().css({ 'margin': '5px' })
      .next().css({ 'margin': '5px 5px 5px 55px' });
    $this.css('z-index', 0);
});

基本的に、これにより 3 つの要素を作成できますDIV。各要素には、表示したい別のページの HTML が含まれています。最初の CSS は、3 つの円すべてをページの中央に配置し、すべての子要素を非表示にします。

ただし、いずれかをクリックすると、jQuery.animate()呼び出しによってさまざまな要素の位置が調整され、クリックされた要素がウィンドウいっぱいに拡大さz-indexれ、他の 2 つのナビゲーション オプションが最前面に表示されるように es がシフトされます。

これは、効果を微調整するために使用できる動作中の jsFiddleです。使い方についてご不明な点がございましたら、お気軽にお問い合わせください。さらにサポートさせていただきます。

于 2013-05-13T18:48:27.840 に答える