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