jquery实现黑客帝国的片头动画效果
程序员文章站
2024-01-26 20:02:28
...
jquery实现黑客帝国的片头动画效果,感觉挺好玩的,对jquery感兴趣的朋友可以深度研究一下,对我们学习jquery也是一种帮助~
代码实现:
<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(''); var ctx = q.getContext('2d'); var draw = function() { ctx.fillStyle = 'rgba(0,0,0,.05)'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = 'green';/*代码颜色*/ ctx.font = '10pt Georgia'; yPositions.map(function(y, index) { text = String.fromCharCode(1e2 + Math.random() * 330); x = (index * 10) + 10; q.getContext('2d').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>
以上是jquery实现黑客帝国的片头动画效果所有源码,感兴趣的同学们可以到PHP中文网搜索更多相关内容哦!
相关推荐:
以上就是jquery实现黑客帝国的片头动画效果的详细内容,更多请关注其它相关文章!
上一篇: php curl接收数据的问题
下一篇: php将image转换为base64编码
推荐阅读
-
jquery实现黑客帝国的片头动画效果
-
CSS3结合jQuery实现动画效果及回调函数的实例
-
jquery实现下拉菜单的手风琴效果
-
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
-
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码_jquery
-
jquery的each(callback) 怎么使用?会实现什么样的效果?
-
jQuery插件zTree实现的多选树效果示例
-
用javascript来实现动画导航效果的代码_javascript技巧
-
jQuery基于ajax实现带动画效果无刷新柱状图投票代码_jquery
-
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery