jquery는 The Matrix의 오프닝 애니메이션 효과를 실현합니다.-JS 튜토리얼-php.cn

jquery는 The Matrix의 오프닝 애니메이션 효과를 실현합니다.

韦小宝

풀어 주다： 2017-11-22 10:56:34

원래의

2164명이 탐색했습니다.

jqueryThe Matrix의 오프닝 애니메이션 효과를 구현하는 것은 꽤 재미있습니다. jquery에 관심이 있는 친구들은 jquery~

jquery는 The Matrix의 오프닝 애니메이션 효과를 실현합니다.

를 배우는 데도 도움이 됩니다. 코드 구현 :

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

로그인 후 복사

위 내용은 모두 The Matrix의 오프닝 애니메이션 효과를 구현하기 위한 jquery의 소스 코드입니다. 관심 있는 학생들은 PHP 중국어 웹사이트로 이동하여 더 많은 관련 콘텐츠를 검색할 수 있습니다!

관련 권장사항:

jquery 제목 선택 애니메이션

jquery는 PC에서 슬라이딩 확인을 구현합니다.

jquery 아코디언 포커스 애니메이션

jquery 제스처로 소스 코드 잠금 해제

위 내용은 jquery는 The Matrix의 오프닝 애니메이션 효과를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!