1

私は一種のマトリックス スタイルの背景を作成しています。画像はランダムにドロップ ダウンします。アニメーションを開始するための引数として、部門を 1 つの関数に渡したいと思います。これを達成する方法がわかりません。ドロップダウンするすべてのグラフィックに対して同じ関数を記述することは、良い習慣ではないと思います。これは私が持っているものです-

    <div id="l_0" class="drop_leds">
    </div>
    <div id="l_1" class="drop_leds">
    </div>
    <div id="l_2" class="drop_leds">
    </div>
    <div id="l_3" class="drop_leds">
    </div>

$(document).ready(function(){

     function row_01(id){
        var movePixAmount = 10;
            setInterval(function(){
               $(id).animate({ marginTop: movePixAmount+"px" }, 10);
               movePixAmount = movePixAmount +10;
                if(movePixAmount === 600){
                    movePixAmount = 0;
                    };
                },
            100);//inter

             };
        row_01("#l_0")

助けてくれてありがとう

4

2 に答える 2

3

かなり長い戦いでしたが、私が勝ちました (: 1 つの関数でこれを行うと、競合が発生するか、すべて同じ速度になります。

しかし、代わりにsetInterval functions、異なる速度で 4 つの異なるものを記述し、これらのfunctions複数の要素を 100 要素のように適用することができます。交差しないように異なるleft値を定義するだけです。ここではjsFiddleが動作しています。

jQuery:

var eleHeight = $('.drop_leds').height();
var windowH = $(window).height();
var count1 = 0;
var count2 = 0;
var counter;
var windowLimit = windowH + eleHeight;

counter = window.setInterval(function() {
    if( count1 >= 0 && count1 < windowLimit ) {
        count1 += 1;
        $('#l_0,#l_6').css({'top':count1 +'px'});
    }
    else if( count1 >= windowLimit ) { 
        count1=0; $('#l_0,#l_6').css({'top':'-'+ eleHeight +'px'});
    }
},1);

counter = window.setInterval(function() {
    if( count2 >= 0 && count2 < windowLimit ) {
        count2 += 4;
        $('#l_1,#l_4').css({'top':count2 +'px'});
    }
    else if( count2 >= windowLimit ) { 
        count2=0; $('#l_1,#l_4').css({'top':'-'+ eleHeight +'px'});
    }
},1);

CSS:

.drop_leds {position:absolute; width:10px;height:60px;background:black;top:0px; }
#l_0 { left:40px; }
#l_1 { left:70px; }
#l_2 { left:110px; }
#l_3 { left:140px; }
#l_4 { left:180px; }
#l_5 { left:210px; }
#l_6 { left:220px; }
#l_7 { left:240px; }
于 2013-01-29T13:39:21.827 に答える
0

私はこれが古いことを知っていますが、別の人がここを見た場合に備えて、アニメーション化されたマトリックスの背景を機能させるためにあなたのウェブサイトに追加できるプラグインを作成しました. https://github.com/manacu/manacuMatrixBg

それが役立つことを願っています!

于 2016-01-19T22:44:35.843 に答える