0

私は自分のウェブサイト用の画像スクローラーを作成しています.2枚の写真があります。ユーザーに次のボタンをクリックしてもらい、画像を 250 ミリ秒かけて 180 度回転させ、写真を変更し、250 ミリ秒かけて再び 180 度回転させます。それを行う方法はありますか？

back.node.onclick=function(){


kitaimage1.animate({
transform : "r180",
kitaimage1.hide();
testimg1.show();
testimg1.animate({ transform : "r180"   });

},250);

}

これまでのところ私が持っているものですが、うまくいきません。前もって感謝します、ノーム・ハーバー

4

1 に答える 1

0

構造化する方法はたくさんありますが、それは絶対に可能です。これは、考えられる多くの解決策の 1 つです。随所にラファエルの紙のオブジェが存在することを想定してpaperいます。

場所と寸法

            var cx = 180, cy = 125; /* These are the coordinates of the center point of your image(s) inside the paper */
            var dx = 320, dy = 240; /* dx and dy describe the dimensions of the desired image interface. */

画像情報

この情報を ajax (ギャラリーの構造に応じて) を介して動的にロードするか、再利用できるようにする必要があると思います。この例では、リスト内の各項目のurl、width、およびを記述するオブジェクトの配列を使用しています。height例えば...

            var imageList =
            [
                {
                    url: '/tests/images/sunset1.jpg',
                    width: 1600,
                    height: 900,
                },
                {
                    url: '/tests/images/moonrise1.jpg',
                    width: 1024,
                    height: 768,
                },
                {
                    url: '/tests/images/cityscape.jpg',
                    width: 1920,
                    height: 1080,
                },
                {
                    url: '/tests/images/forest03.jpg',
                    width: 500,
                    height: 325,
                },
            ];

コード

最後に、DOM の準備ができたら (または画像が読み込まれた後、またはその他のイベントがそれをトリガーする必要がある場合)、このコードを実行します。これは、トランジションを行う関数を作成し、それを呼び出して最初の画像を配置するだけです。

            var imageIndex = 0;
            var rotationMultiplier = 1;
            var currentImage = null;

            function rotateTransitionNext()
            {
                rotationMultiplier *= -1;
                imageIndex++;
                if ( imageIndex >= imageList.length )
                    imageIndex = 0;

                if ( currentImage )
                {
                    currentImage.animate( { transform: ["...r", 180 * rotationMultiplier, cx, cy], opacity: 0.0 }, 1000, '<>', function()
                        {
                            this.remove();
                        } );
                }
                var newImage = paper.image( imageList[imageIndex].url, cx - dx / 2, cy - dy / 2, dx, dy )
                                    .attr( { transform: [ "r", -180 * rotationMultiplier, cx, cy], opacity: 0.0 } )
                                    .animate( { transform: [ "...r", 180 * rotationMultiplier, cx, cy ], opacity: 1.0 }, 1000, '<>', function()
                                        {
                                            currentImage = this;
                                            this.click( rotateTransitionNext );
                                        } );
            }

            rotateTransitionNext();

ルーズエンド 大まかな出発点として、これをまとめるために行うべきことがいくつかあります。

  1. 善のために、これを独自の名前空間にラップして、グローバルスコープが残骸で乱雑にならないようにします（私の悪いことです）

  2. 異なる画像の縦横比を維持します。現在、すべての画像は、グローバルに定義された寸法 (dx および dy) に準拠するよう強制されています。

ハッピーコーディング。

更新:これは、作業中のこのコードの段階的な例です。画像をクリックするだけで、次の画像に回転します。

于 2013-09-04T18:55:55.733 に答える