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