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
        &gt;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