微客导航 » 文章资讯 » jQuery模拟黑客帝国矩阵效果实例

jQuery模拟黑客帝国矩阵效果实例

2024-03-30 03:29:03 485

本文实例讲述了jQuery模拟黑客帝国矩阵效果的方法。分享给大家供大家参考。具体实现方法如下：

html部分如下：

<divid="container">
<divstyle="width:10px;word-break:break-all">
10001001110010010010000
</div>
<divstyle="width:10px;word-break:break-all;margin-left:30px">
theanswerisinyourmind
</div>
</div>

css部分如下：

#containerdiv{padding:10px;position:absolute;border:0pxdottedbrown;width:0px;color:green;text-shadow:1px1px3px#cccccc;}
.text{padding:10px;color:#ccc;}
#panel{width:400px;margin:0auto;color:white;margin-top:20%;font-size:15px;font-weight:bold;z-index:99999;background:black;}

js部分如下：

$(function(){
for(vari=0;i<3;i++)$('div','#container').clone().prependTo('#container');
//克隆一遍增加数据
range();
setInterval(drop,150);//速度150毫秒
});
//排列
functionrange(){
varnum=1;
$('div','#container').each(function(i){
varww=$(window).width();//窗口宽度
varwh=$(window).height();
varol=$(this).offset().left;//距左边像素
varot=-20;//$(this).offset().top;//从头部以上开始
i++;
if(i%22==0)num=1;//22个一排
$(this).css({
"left":(ol+num*60)+"px",
"top":(ot+Math.ceil(i/2)*30)+"px"
});//距左距离保持，距上距离变化
num++;
});
}
//降落
functiondrop(){
$('div','#container').each(function(i){
varwh=$(window).height();
varol=$(this).offset().left;
varot=$(this).offset().top;
varrnd=Math.round(Math.random()*100);
varrnd2=Math.round(Math.random()*50);
//i=i==0?0.5:i;
$(this).css({
"top":(ot+rnd+rnd2)+"px"
});//降落的速度
if(ot>=wh)//如果掉到窗口以下
{
//$(this).css({"top":wh-20+"px"});
//停在当前位置不让继续从上往下掉
$(this).css({
"top":-5*rnd+"px"
});//从顶部以上开始
}
});
}

希望本文所述对大家的jQuery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

jQuery模拟黑客帝国矩阵效果实例

热门推荐

随机推荐