3

以下の写真は、私が構築しようとしているものです。 ランダムボックス

ページ全体が読み込まれるまで、すべてのボックスが非表示になるという考え方です。次に、ブラウザのビューポートの周囲にランダムな位置を設定する必要があります。次に、適切な位置に移動するために、それら（ボックス）をアニメーション化する必要があります。

ボックスはCSSで絶対位置を持っています。私の考えは、ウィンドウがロードされて初期位置が変数になり、ボックスの位置がランダム化され、最後に開始位置に移動するときです。私がはっきりしていることを願っています:)

これが私の現在の設定です：http：//jsfiddle.net/HgMB4/

ボックスを初期位置にアニメーション化する方法がわからないため、ウィンドウの読み込み時にコードが欠落していることに気付くでしょう。

$(window).load(function(){
    //Huh! What to write here to animate boxes to their initial positions set by CSS?
});
4

3 に答える 3

3

これを試して

    $(document).ready(function(){
      var h = $(window).height();
      var w = $(window).width();            
      $('#intro .box').each(function(){
            var originalOffset = $(this).position(),
            $this = $(this),
            tLeft = w-Math.floor(Math.random()*900),
            tTop  = h-Math.floor(Math.random()*900);

           $(this).animate({"left": tLeft , "top": tTop},5000,function(){
                           $this.animate({
                               "left": originalOffset.left, 
                               "top": originalOffset.top
                           },5000);

                        });        
    });
});
​

これにより、ボックスがランダムな位置にアニメーション化されてから、元の位置に戻ります。

これが実際のデモですhttp://jsfiddle.net/HgMB4/18

ボックスが初期位置に移動したときにのみアニメーション化する場合は、これを試してください

$(document).ready(function(){
    var h = $(window).height();
    var w = $(window).width();            
    $('#intro .box').each(function(){
        var originalOffset = $(this).position(),
            $this = $(this),
           tLeft = w-Math.floor(Math.random()*900),
           tTop  = h-Math.floor(Math.random()*900);

        $(this).css({
            "left": tLeft,
            "top": tTop
        });

        $this.animate({ "left": originalOffset.left, 
                         "top": originalOffset.top
                     },5000);

    });
});
​
​

これが作業デモですhttp://jsfiddle.net/HgMB4/22

于 2012-12-22T13:11:11.967 に答える
1

要件

  • ページ全体が読み込まれるまでボックスは非表示になります
  • ボックスはブラウザのビューポートの周りのランダムな位置に設定されます
  • ボックスは適切な位置にアニメートする必要があります

元の位置を保存し、ランダムに配置した後、アニメーションを開始して開始位置に戻すことができます。また、コードの実行を高速化するために繰り返されたDOM参照もキャッシュしました（ほとんどの場合、目立たないかもしれませんが、それは良い習慣です）

デモ-ボックスがランダムに配置され、適切な位置にアニメーション化されます。

2つのアクションを分離し、元のコードを使用してボックスをランダムな場所に配置しましたが、 jQueryのデータを使用して関連データに元の位置を保存し、適切な位置にアニメーション化するために使用します。

次のいずれかのメソッドを呼び出すことにより、オンデマンドでボックスをランダム化して再設定できるようになりました。

$(document).ready(function() {
    var h = $(window).height();
    var w = $(window).width();
    var $allBoxes = $('#intro .box');

    placeBoxesRandomly($allBoxes, h, w);
    
    placeBoxesToDataStorePositions($allBoxes);
});​

placeBoxesRandomly元の開始位置データを要素に関連付けることを除いて、以前と同じように実行します。

function placeBoxesRandomly($boxes, h, w) {
    $boxes.each(function() {
        var $box = $(this);
        var position = $box.position();

        tLeft = w - Math.floor(Math.random() * 900), tTop = h - Math.floor(Math.random() * 900);
        $box.css({
            "left": tLeft,
            "top": tTop
        });
        $box.data("start-position-left", position.left);
        $box.data("start-position-top", position.top);
    });
}

placeBoxesToDataStorePositions関連するデータに保存されている位置にボックスを配置します。

function placeBoxesToDataStorePositions($boxes) {
    $boxes.each(function() {
        var $box = $(this);
        $box.animate({
            "left": $box.data("start-position-left"),
            "top": $box.data("start-position-top")
        }, 3000);
    });
}
于 2012-12-22T13:32:31.203 に答える
0

jQueryIsotopeプラグインを探していると思います。このスタック交換ページは、彼のこれがそのバリ​​エーションで暗示されています

于 2012-12-22T13:16:50.467 に答える