1

Flipboard ポップアップ アニメーションのような Jquery/JS アニメーションを実装したいと考えています。

ユーザーが画像をクリックすると、画像が特定のサイズに拡大され、その白い背景が画面全体を占めるまで拡大されます。

アニメーションが完了すると、ページ コンテンツが読み込まれます。 http://flipboard.com/

これに関するヘルプをいただければ幸いです。

どうもありがとう！

4

3 に答える 3

1 
<script>

//ついに答えを見つけました。これは完全なコードです。

$(document).ready(function() { 

    $('.box').click(function(e){

        if( $('div').hasClass('overlay')==false ){

        //event.preventDefault();
        var $box = $(this);

        $('<div class="overlay"></div>').prependTo($box);

        var $overlay = $('.overlay');

        $overlay.css( {
                       'position'       : 'absolute',
                       'background-color'   : 'white',
                       'width'              : $box.outerWidth(true),
                       'height'     : $box.outerHeight(true),
                       'left'       : $box.offset().left,
                       'top'        : $box.offset().top,
                       'z-index'        : 99999999
        });                                       
        //$($placeholder).insertAfter('.box');  

        $overlay.animate({
                width: $(document).width(),
                height: $(document).height(),
                left: '0px',
                top: '0px'
            }, 500, function() {
                //reset the overlay
                $overlay.css({'width': ''});
                $overlay.css({'height': '1500px'});
                //ajax    
                $.ajax({  
                    type: "POST",  
                    url: "../ajax/get_event.php",  
                    data: "firstname=clint&lastname=eastwood",  
                    success: function(resp){  
                        // we have the response  
                        $overlay.html(resp);
                        $('.window').fadeIn(200);
                    },  
                    error: function(e){  
                        alert('Error: ' + e);  
                    }  
                });
        });

        }else{
            //click only on overlay to exit
            var $target = $(e.target);    
            if ( $target.is('.overlay') ) {
               $('.overlay').remove();
            }
        }  

    });//end box click

});//end of jquery
</script>
于 2012-08-29T09:28:17.850 に答える
1

Codropsは数か月前にそれを行いました。ここですべてのコードを書き出すことはできませんが、この記事を読んでください。

于 2012-08-27T04:55:24.640 に答える
1

Codrops は、これを行うためのプラグインとその使用方法の説明を投稿しました。ここにプラグインの特にクールなデモがあります。

于 2012-09-04T11:28:37.300 に答える