How to Use jQuery to simulate the matrix effect of the matrix _ jquery-js tutorial

This article mainly introduces jQuery's method of simulating the matrix effect of the matrix. The example shows how to use jQuery to operate the page elements to achieve the animation effect, for more information about how jQuery simulates the matrix effect of the matrix, see the following example. Share it with you for your reference. The specific implementation method is as follows:

The html section is as follows:

  
    10001001110010010010000  
  
    the answer is in your mind  

The css section is as follows:

#container p{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;}

The js section is as follows:

$ (Function () {for (var I = 0; I <3; I ++) $ ('P', '# iner '). clone (). prependTo ('# iner'); // Add the data range (); setInterval (drop, 150); // The speed is 150 milliseconds }); // arrange function range () {var num = 1; $ ('P', '# iner '). each (function (I) {var ww = $ (window ). width (); // window width var wh = $ (window ). height (); var ol = $ (this ). offset (). left; // left pixel var ot =-20; // $ (this ). offset (). top; // starting from above the header I ++; if (I % 22 = 0) Num = 1; // 22 rows (this).css ({"left": (ol + num * 60) + "px", "top": (ot + Math. ceil (I/2) * 30) + "px"}); // keep the left distance, and change the num ++ from the top ;});} // function drop () {$ ('P', '# iner '). 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); // I = 0? 0.5: I; ((this).css ({"top": (ot + rnd + rnd2) + "px"}); // The landing speed if (ot> = wh) // if it falls below the window {// ((this).css ({"top": wh-20 + "px "}); // stop at the current position and do not continue to drop the cursor (this).css ({"top":-5 * rnd + "px"}); // start from the top }});}

I hope this article will help you with jQuery programming.