移动多个div样基质风格的背景,一个功能 [英] Move multiple divs like matrix style background with one function
问题描述
我提出那种风格矩阵背景,图像会在随机时间地掉了下来。
我想通过师的一个函数作为参数来启动动画。我不知道如何做到这一点。我不认为它很好的做法写相同的功能为每个滴下来的图形。
这就是我 -
I am making sort of matrix style background, images are going to drop down at random times. I would like to pass the division's to one function as an argument to start the animation. I cannot work out how to accomplish this. I don't think its good practice to write the same function for every graphic that drops down. This is what I have-
<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")
感谢您的帮助。
推荐答案
它是一个相当漫长的战斗,但我赢了(:如果你这样做有一个功能,就会出现冲突或他们都将有相同的速度
Its been a quite long battle but i win (: If you do this with one function, there will be conflict or they will all have same speed.
但是,相反你可以写4种不同的的setInterval
功能
以不同的速度和应用这些功能
多个元素,如100元。只要定义不同的离开
值不得过。 这里是工作的jsfiddle。
But instead you can write 4 different setInterval
functions
with different speed and apply these functions
multiple elements like 100 elements. Just define different left
values to not cross over. Here is working 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; }
这篇关于移动多个div样基质风格的背景,一个功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!