Das Beispiel in diesem Artikel beschreibt, wie jQuery den Matrixeffekt von The Matrix simuliert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:
Der HTML-Teil lautet wie folgt:
1 2 3 4 5 6 7 8 | <div id= "container" >
<div style= "width:10px; word-break :break-all" >
10001001110010010010000
</div>
<div style= "width:10px; word-break :break-all;margin-left:30px" >
the answer is in your mind
</div>
</div>
|
Nach dem Login kopieren
Der CSS-Teil lautet wie folgt:
1 2 3 | #container div{padding:10px;position:absolute;border:0px dotted brown;width:0px;color:green;text-shadow: 1px 1px 3px #cccccc;}
.text{padding:10px;color:#ccc;}
#panel{width:400px;margin:0 auto;color:white;margin-top:20%;font-size:15px;font-weight:bold;z-index:99999;background:black;}
|
Nach dem Login kopieren
Der js-Teil lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | $( function () {
for ( var i = 0; i < 3; i++) $( 'div' , '#container' ). clone ().prependTo( '#container' );
range();
setInterval(drop, 150);
});
function range() {
var num = 1;
$( 'div' , '#container' ).each( function (i) {
var ww = $(window).width();
var wh = $(window).height();
var ol = $(this).offset().left;
var ot = -20;
i++;
if (i % 22 == 0) num = 1;
$(this).css({
"left" : (ol + num * 60) + "px" ,
"top" : (ot + Math. ceil (i / 2) * 30) + "px"
});
num++;
});
}
function drop() {
$( 'div' , '#container' ).each( function (i) {
var wh = $(window).height();
var ol = $(this).offset().left;
var ot = $(this).offset().top;
var rnd = Math. round (Math.random() * 100);
var rnd2 = Math. round (Math.random() * 50);
$(this).css({
"top" : (ot + rnd + rnd2) + "px"
});
if (ot >= wh)
{
$(this).css({
"top" : -5 * rnd + "px"
});
}
});
}
|
Nach dem Login kopieren
Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.