jQuery realizes the opening animation effect of The Matrix-JS Tutorial-php.cn

jQuery realizes the opening animation effect of The Matrix

韦小宝

Release： 2017-11-22 10:56:34

Original

2108 people have browsed it

jquery It’s fun to realize the opening animation effect of The Matrix. Friends who are interested in jquery can study it in depth and learn from usjquery It’s also a help~

jQuery realizes the opening animation effect of The Matrix

## Code implementation:

 <html>
 <head>
     <title>PHP中文网</title>
     <meta charset="utf-8">
     <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
     <script>
     /*
     11     ① 用setInterval(draw, 33)设定刷新间隔
     12
     13     ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母
     14
     15     ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景
     16
     17     ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置
     18
     19     ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行，就会产生《黑客帝国》的片头效果。
     20 */
         $(document).ready(function() {
                //设备宽度
                var s = window.screen;
                 var width = q.width = s.width;
                var height = q.height;
                var yPositions = Array(300).join(0).split(&#39;&#39;);
                 var ctx = q.getContext(&#39;2d&#39;);
                var draw = function() {
                         ctx.fillStyle = &#39;rgba(0,0,0,.05)&#39;;
                         ctx.fillRect(0, 0, width, height);
                         ctx.fillStyle = &#39;green&#39;;/*代码颜色*/
                         ctx.font = &#39;10pt Georgia&#39;;
                         yPositions.map(function(y, index) {
                                 text = String.fromCharCode(1e2 + Math.random() * 330);
                                 x = (index * 10) + 10;
                                 q.getContext(&#39;2d&#39;).fillText(text, x, y);
                                 if (y > Math.random() * 1e4) {
                                        yPositions[index] = 0;
                                     } else {
                                        yPositions[index] = y + 10;
                                     }
                            });
                     };
                RunMatrix();
               function RunMatrix() {
                        Game_Interval = setInterval(draw,30);
                     }
             });
     </script>
     </head>
 <body>
     <div align="center" style=" position:fixed; left:0; top:0px; width:100%; height:100%;">
           <canvas id="q" width="1440" height="900"></canvas>
     </div>
 </body>
 </html>

Copy after login

The above is jquery implements all the source code of the opening animation effect of The Matrix. Interested students can go to PHP中文网 to search for more related content!

Related recommendations:

jquery title selection animation

jquery implements sliding verification on pc

jquery accordion focus animation

jquery implementation Gesture unlock source code

The above is the detailed content of jQuery realizes the opening animation effect of The Matrix. For more information, please follow other related articles on the PHP Chinese website!