0

画像のコラージュ/パッチワークを作成しています。私は masonry.js を使用してコンテンツを必要に応じてレイアウトし、このサイトで見つけたスクリプトを使用して div コンテンツをランダムに (2 つの画像間で) 変更しています。

ただし、この画像スイッチをアニメーション化する簡単な方法が欲しいのですが、私の javascript/jquery の知識は非常に限られています。

以下は、私のサイトの完全なコードです。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jquery.masonry.min.js"></script>
        <style>
            #container {
                width: 350px;
                height: 420px;
                border: solid 1px #000;
            }
            .item {
                width: 105px;
                height: 105px;
                margin: 0;
                float: left;
            }
            .item_2 {
                width: 245px;
                height: 105px;
                margin: 0;
                float: left;
            }
            .item_3 {
                width: 245px;
                height: 210px;
                margin: 0;
                float: left;
            }
        </style>
        <script type="text/javascript">
            var logSwitch =[
                "<img src='apps/TRA-100.gif' />",
                "<img src='apps/logistics.gif' />",
            ];

            setInterval(function() {
                var i = Math.round((Math.random()) * logSwitch.length);
                if (i == logSwitch.length) --i;
                $("#logistics").html(logSwitch[i]);
            }, 5 * 1000);
        </script>
    </head>
    <body>
        <div id="container">
          <div class="item_3"><img src="apps/auto.gif" /></div>
          <div class="item"><div id="logistics"><img src="apps/TRA-100.gif" /></div></div>
          <div class="item"><img src="apps/marine.gif" /></div>
          <div class="item"><img src="apps/its.gif" /></div>
          <div class="item_2"><img src="apps/Entertain.gif" /></div>
          <div class="item_2"><img src="apps/meteor.gif" /></div>
          <div class="item"><img src="apps/aviation.gif" /></div>
        </div>
        <script type="text/javascript">
            var $container = $('#container');
            $container.imagesLoaded(function(){
                $container.masonry({

                    columnWidth : 300
                );
            });
        </script>
    </body>
</html>

どの方向に向かうべきか誰かアドバイスしてもらえますか? このフィドル: ( http://jsfiddle.net/jWcLz/1/ ) は非常に単純に見えますが、実装方法がわかりません。

前もって感謝します。

4

1 に答える 1

1

現在、 内の HTML を置き換えていますが#logistics、それをフェードさせるために何もしていません。リンクしたデモjsfiddleが機能する方法はfadeOut()、親要素を呼び出し、それが完了したらfadeIn()同じ要素の関数を呼び出し、新しいコンテンツを与えることです。

コードで同じことを行う方法は次のとおりです。

交換...

$("#logistics").html(logSwitch[i]);

...と...

$('#logistics').fadeOut(500, function() {
    $(this).html(logSwitch[i]).fadeIn(500);
});

編集:コンテンツをランダムに切り替えたくない場合は、ランダムにしないでください! 代わりに、そのi外側に設定してから、その中でsetInterval()変更iします。

var i = 0;
setInterval(function() {
     i++;
     if (i == logSwitch.length) {
          i = 0;
     }
     $('#logistics').fadeOut(500, function() {
          $(this).html(logSwitch[i]).fadeIn(500);
     });
}, 5000);
于 2013-05-23T08:29:04.437 に答える