Maison >interface Web >js tutoriel >jquery réalise l'effet d'animation d'ouverture de The Matrix

jquery réalise l'effet d'animation d'ouverture de The Matrix

韦小宝original: 2017-11-22 10:56:342166parcourir

jquery C'est amusant de réaliser l'effet d'animation d'ouverture de The Matrix. Les amis qui sont intéressés par jquery peuvent l'étudier en profondeur et apprendre de nous jquery. C'est aussi une aide~

jquery réalise leffet danimation douverture de The Matrix

Mise en place du code :

 <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>

Ce qui précède est tout le code source de jquery pour implémenter l'effet d'animation d'ouverture de The Matrix. Les étudiants intéressés peuvent accéder au site Web PHP chinois pour rechercher plus de contenu connexe !

Recommandations associées :

animation de sélection de titre jquery

jquery implémente la vérification glissante sur PC

jquery accordéon focus animation

jquery implémente Code source de déverrouillage gestuel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'analyse de la barre de progression de contrôle JavaScriptArticle suivant：Exemple d'analyse de la barre de progression de contrôle JavaScript

Articles Liés

Voir plus