0 
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px',
    'background-color': color
});

var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

$newdiv.css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'display':'none'
}).appendTo( 'body' ).fadeIn(700).delay(3500).fadeOut(300, function(){
   $(this).remove();
   makeDiv(); 
}); 
})();

フィドル: http://jsfiddle.net/redler/QcUPk/8/

デザインのモックアップ: http://i.imgur.com/D4mhXPZ.jpg

見つけたこのコードをいじってみましたが、最終的には解体して壊してしまいます。ある例では、反復ごとにオブジェクトを 2 倍にするコードがあり、PC がクラッシュしそうになりました。

ここでいくつかのことが起こっている必要があります。

  • これらのオブジェクトのうち少なくとも 8 つが、この表示と非表示の動作を同時に実行し、互いに少しずらしてオーバーラップする必要があります (centerOffset?)。表示される各正方形は、まだ残っている前の画像の前にある必要があります。

  • オブジェクトは色付きの四角形ではなく、データベース (製品の在庫) からランダムに呼び出された画像である必要があります。

  • 写真のいずれかにマウスオーバーすると、プロセスが一時停止し、マウスをその上に置いている間、そのオブジェクトが前面に表示され、その部分に関するテキストが表示されます。それをクリックすると、アイテム ページに移動します。

注: ランダムなサイズ変更要素は便利ですが、背の高い画像や幅の広い画像などがあります。それを処理する方法がわかりません。

4

1 に答える 1

0

8 つのオブジェクトを同時に表示/非表示にするには、かなりの量のアニメーション/タイミング作業が必要です。次の難関は、オブジェクト上でのマウスオーバーをキャプチャすることです。「前面に出る」場合は、jQueryホバー インテントプラグインが必要になる場合があります。とにかく、画面上で 8 つのランダムなオブジェクトを同時にアニメーション化する作業コードを次に示します。オブジェクトの上にマウスを置くと、表示/非表示の動作が停止します。マウスがオブジェクトから離れると、アニメーションが続きます: http://jsfiddle.net/amyamy86/Q6XKv/

主な要点は次のとおりです (完全なコードについては、フィドルを参照してください)。

// Adds the box and animates in/out
var addBox = function () {
    var makeBox = function () {
        var divsize = ((Math.random() * 100) + 50).toFixed();
        var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
        var newBox = $('<div class="box" id="box' + boxIds + '"/>').css({
            'width': divsize + 'px',
                'height': divsize + 'px',
                'background-color': color
        });
        return newBox;
    };
    var newBox = makeBox();
    var boxSize = newBox.width();
    var posx = (Math.random() * ($(document).width() - boxSize)).toFixed();
    var posy = (Math.random() * ($(document).height() - boxSize)).toFixed();
    newBox.css({
        'position': 'absolute',
            'left': posx + 'px',
            'top': posy + 'px',
            'display': 'none'
    }).appendTo('body').fadeIn(ANIMATE_SPEED / 2, function () {
        if (timer !== null) {
            $(this)
            .delay(ANIMATE_SPEED * MAX_BOXES)
            .fadeTo(1, 1, function () {
                if (timer !== null) {
                    var id = $(this).attr('id');
                    removeBox(id);
                }
            });
        }
    });
    boxIdList.push(boxIds++);
    lastBox = newBox;
    numBoxes++;
    return newBox;
};


// Add the boxes in at interval animateSpeed, if there's too many then don't add
var animateBox = function () {
    if (numBoxes < MAX_BOXES) {
        addBox();
    } else {
        removeBox(boxIdList[0]);
    }
    timer = setTimeout(animateBox, ANIMATE_SPEED); // re-set timer for the next interval
};

// starts everything off
var start = function () {
    timer = setTimeout(animateBox, ANIMATE_SPEED);
};

インタラクションとエフェクトに必要な詳細レベルを追加するには、これで十分です。

于 2013-03-22T07:31:41.717 に答える