Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { -webkit-font-smoothing: antialiased; font: normal 12px/14px "Carrois Gothic", sans-serif; width: 100%; height: 100%; margin: 0; overflow: hidden; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { background: black; } #stats { z-index: 100; } #info { background: rgba(0, 0, 0, 0.7); position: fixed; bottom: 0; left: 0px; width: 250px; padding: 10px 20px 20px; z-index: 100; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform .5s ease-in-out; -moz-transition: -moz-transform .5s ease-in-out; -o-transition: -o-transform .5s ease-in-out; transition: transform .5s ease-in-out; } #info.closed { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .toggle-info { position: absolute; display: block; height: 10px; background: rgba(0, 0, 0, 0.8); width: 290px; left: 0; text-align: center; padding: 3px 0 7px; text-decoration: none; color: white; text-shadow: none; } .toggle-info:hover { background: rgb(0, 0, 0); } #close { top: -20px; } #open { bottom: -20px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } button { background: rgba(255, 255, 255, 0.2); color: #fff; border: 0; border-radius: 2px; padding: 7px 10px; box-shadow: 0 0 3px 0px rgba(255,255,255, 0.3); cursor: pointer; } button:hover { background: rgba(255, 255, 255, 0.1); } p a { color: #fff; } p a:hover { color: #EFFDEB; text-shadow: 0px 0px 5px #75AD61; }
JavaScript
var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div"); k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display= "block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height= a+"px",m=b,r=0);return b},update:function(){l=this.end()}}}; (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); // stats var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild( stats.domElement ); var M = { settings: { COL_WIDTH: 20, COL_HEIGHT: 25, VELOCITY_PARAMS: { min: 4, max: 8 }, CODE_LENGTH_PARAMS: { min: 20, max: 40 } }, animation: null, c: null, ctx: null, lineC: null, ctx2: null, WIDTH: window.innerWidth, HEIGHT: window.innerHeight, COLUMNS: null, canvii: [], // font from here https://www.dafont.com/matrix-code-nfi.font font: '30px matrix-code', letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'], codes: [], createCodeLoop: null, codesCounter: 0, init: function () { M.c = document.getElementById( 'canvas' ); M.ctx = M.c.getContext( '2d' ); M.c.width = M.WIDTH; M.c.height = M.HEIGHT; M.ctx.shadowBlur = 0; M.ctx.fillStyle = '#000'; M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT); M.ctx.font = M.font; M.COLUMNS = Math.ceil(M.WIDTH / M.settings.COL_WIDTH); for (var i = 0; i < M.COLUMNS; i++) { M.codes[i] = []; M.codes[i][0] = { 'open': true, 'position': {'x': 0, 'y': 0}, 'strength': 0 }; } M.loop(); M.createLines(); M.createCode(); // not doing this, kills CPU // M.swapCharacters(); window.onresize = function () { window.cancelAnimationFrame(M.animation); M.animation = null; M.ctx.clearRect(0, 0, M.WIDTH, M.HEIGHT); M.codesCounter = 0; M.ctx2.clearRect(0, 0, M.WIDTH, M.HEIGHT); M.WIDTH = window.innerWidth; M.HEIGHT = window.innerHeight; M.init(); }; }, loop: function () { M.animation = requestAnimationFrame( function(){ M.loop(); } ); M.draw(); stats.update(); }, // this used to be used straight after createCode, without using createCanvii - it allowed // the characters within the code streams to be easily changable, but caused huge perf issues // OLDdraw: function() { // var codesLen = M.codes.length; // var codeLen; // var x; // var y; // var text; // var velocity; // var columnIndex; // var strength; // var fadeStrength; // M.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; // M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT); // M.ctx.globalCompositeOperation = 'source-over'; // for (var i = 0; i < codesLen; i++) { // velocity = M.codes[i][0].velocity; // M.codes[i][0].position.y += velocity; // y = M.codes[i][0].position.y; // x = M.codes[i][0].position.x; // codeLength = M.codes[i].length; // strength = M.codes[i][0].strength; // for (var j = 1; j < codeLength; j++) { // text = M.codes[i][j]; // if (j < 5) { // M.ctx.shadowColor = 'hsl(104, 79%, 74%)'; // M.ctx.shadowOffsetX = 0; // M.ctx.shadowOffsetY = 0; // M.ctx.shadowBlur = 10; // M.ctx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')'; // } else if (j > (codeLength - 4)) { // fadeStrength = j / codeLength; // fadeStrength = 1 - fadeStrength; // M.ctx.shadowOffsetX = 0; // M.ctx.shadowOffsetY = 0; // M.ctx.shadowBlur = 0; // M.ctx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')'; // } else { // M.ctx.shadowOffsetX = 0; // M.ctx.shadowOffsetY = 0; // M.ctx.shadowBlur = 0; // M.ctx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')'; // } // // M.ctx.fillStyle = 'hsl(104, 79%, ' + (M.codes[i][0].strength * 74) + '%)'; // M.ctx.fillText(text, x, (y - (j * M.settings.COL_HEIGHT))); // if ((j === codeLength - 1) && (y - ((j + 1) * M.settings.COL_HEIGHT) > M.HEIGHT)) { // columnIndex = M.codes[i][0].position.x / M.settings.COL_WIDTH; // M.codes[columnIndex][0].open = true; // M.codes[columnIndex][0].position.y = 0; // } // } // } // }, draw: function() { var velocity, height, x, y, c, ctx; // slow fade BG colour M.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT); M.ctx.globalCompositeOperation = 'source-over'; for (var i = 0; i < M.COLUMNS; i++) { // check member of array isn't undefined at this point if (M.codes[i][0].canvas) { velocity = M.codes[i][0].velocity; height = M.codes[i][0].canvas.height; x = M.codes[i][0].position.x; y = M.codes[i][0].position.y - height; c = M.codes[i][0].canvas; ctx = c.getContext('2d'); M.ctx.drawImage(c, x, y, M.settings.COL_WIDTH, height); if ((M.codes[i][0].position.y - height) < M.HEIGHT){ M.codes[i][0].position.y += velocity; } else { M.codes[i][0].position.y = 0; } } } }, createCode: function() { if (M.codesCounter > M.COLUMNS) { clearTimeout(M.createCodeLoop); return; } var randomInterval = M.randomFromInterval(0, 100); var column = M.assignColumn(); if (column) { var codeLength = M.randomFromInterval(M.settings.CODE_LENGTH_PARAMS.min, M.settings.CODE_LENGTH_PARAMS.max); var codeVelocity = (Math.random() * (M.settings.VELOCITY_PARAMS.max - M.settings.VELOCITY_PARAMS.min)) + M.settings.VELOCITY_PARAMS.min; var lettersLength = M.letters.length; M.codes[column][0].position = {'x': (column * M.settings.COL_WIDTH), 'y': 0}; M.codes[column][0].velocity = codeVelocity; M.codes[column][0].strength = M.codes[column][0].velocity / M.settings.VELOCITY_PARAMS.max; for (var i = 1; i <= codeLength; i++) { var newLetter = M.randomFromInterval(0, (lettersLength - 1)); M.codes[column][i] = M.letters[newLetter]; } M.createCanvii(column); M.codesCounter++; } M.createCodeLoop = setTimeout(M.createCode, randomInterval); }, createCanvii: function(i) { var codeLen = M.codes[i].length - 1; var canvHeight = codeLen * M.settings.COL_HEIGHT; var velocity = M.codes[i][0].velocity; var strength = M.codes[i][0].strength; var text, fadeStrength; var newCanv = document.createElement('canvas'); var newCtx = newCanv.getContext('2d'); newCanv.width = M.settings.COL_WIDTH; newCanv.height = canvHeight; for (var j = 1; j < codeLen; j++) { text = M.codes[i][j]; newCtx.globalCompositeOperation = 'source-over'; newCtx.font = '30px matrix-code'; if (j < 5) { newCtx.shadowColor = 'hsl(104, 79%, 74%)'; newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 10; newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')'; } else if (j > (codeLen - 4)) { fadeStrength = j / codeLen; fadeStrength = 1 - fadeStrength; newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')'; } else { newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')'; } newCtx.fillText(text, 0, (canvHeight - (j * M.settings.COL_HEIGHT))); } M.codes[i][0].canvas = newCanv; }, swapCharacters: function() { var randomCodeIndex; var randomCode; var randomCodeLen; var randomCharIndex; var newRandomCharIndex; var newRandomChar; for (var i = 0; i < 20; i++) { randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1)); randomCode = M.codes[randomCodeIndex]; randomCodeLen = randomCode.length; randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1)); newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1)); newRandomChar = M.letters[newRandomCharIndex]; randomCode[randomCharIndex] = newRandomChar; } M.swapCharacters(); }, createLines: function() { M.linesC = document.createElement('canvas'); M.linesC.width = M.WIDTH; M.linesC.height = M.HEIGHT; M.linesC.style.position = 'absolute'; M.linesC.style.top = 0; M.linesC.style.left = 0; M.linesC.style.zIndex = 10; document.body.appendChild(M.linesC); var linesYBlack = 0; var linesYWhite = 0; M.ctx2 = M.linesC.getContext('2d'); M.ctx2.beginPath(); M.ctx2.lineWidth = 1; M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)'; while (linesYBlack < M.HEIGHT) { M.ctx2.moveTo(0, linesYBlack); M.ctx2.lineTo(M.WIDTH, linesYBlack); linesYBlack += 5; } M.ctx2.lineWidth = 0.15; M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)'; while (linesYWhite < M.HEIGHT) { M.ctx2.moveTo(0, linesYWhite+1); M.ctx2.lineTo(M.WIDTH, linesYWhite+1); linesYWhite += 5; } M.ctx2.stroke(); }, assignColumn: function() { var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1)); if (M.codes[randomColumn][0].open) { M.codes[randomColumn][0].open = false; } else { return false; } return randomColumn; }, randomFromInterval: function(from, to) { return Math.floor(Math.random() * (to - from+ 1 ) + from); }, snapshot: function() { window.open(M.c.toDataURL()); } }; function eventListenerz() { var controlToggles = document.getElementsByClassName('toggle-info'); var controls = document.getElementById('info'); var snapshotBtn = document.getElementById('snapshot'); function toggleControls(e) { e.preventDefault(); controls.className = controls.className === 'closed' ? '' : 'closed'; } for (var j = 0; j < 2; j++) { controlToggles[j].addEventListener('click', toggleControls, false); } snapshotBtn.addEventListener('click', M.snapshot, false); } window.onload = function() { M.init(); eventListenerz(); };
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>矩阵代码雨-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号