js实现ascii字符画轮换效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现ascii字符画轮换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { background: #222222; } .morph-section { width: 400px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; font-family: monospace; color: #fff; } .info { font-family: monospace; position: absolute; line-height: 20px; font-size: 14px; left: 20px; bottom: 20px; color: #fff; } a { color: #f9f9f9; } </style> </head> <body> <pre class="morph-section"> ____ o8%8888, o88%8888888. 8'- -:8888b 8' 8888 d8.-=. ,==-.:888b >8 `~` :`~' d8888 88 ,88888 88b. `-~ ':88888 888b ~==~ .:88888 88888o--:':::8888 `88888| :::' 8888b 8888^^' 8888b d888 ,%888b. d88% %%%8--'-. /88:.__ , _%-' --- - '''::===..-' = --. ` </pre><script> /** * Ascii Morph */ var AsciiMorph = (function() { 'use strict'; var element = null; var canvasDimensions = {}; var renderedData = []; var framesToAnimate = []; var myTimeout = null; /** * Utils */ function extend(target, source) { for (var key in source) { if (!(key in target)) { target[key] = source[key]; } } return target; } function repeat(pattern, count) { if (count < 1) return ''; var result = ''; while (count > 1) { if (count & 1) result += pattern; count >>= 1, pattern += pattern; } return result + pattern; } function replaceAt(string, index, character) { return string.substr(0, index) + character + string.substr(index+character.length); } /** * AsciiMorph */ function init(el, canvasSize) { // Save the element element = el; canvasDimensions = canvasSize; } function squareOutData(data) { var i; var renderDimensions.........完整代码请登录后点击上方下载按钮下载查看
网友评论0