模拟终端打印效果特效

  1. 云栖社区>
  2. 博客列表>
  3. 正文

模拟终端打印效果特效

cometwo123 2015-12-31 00:30:00 浏览517 评论0

摘要: 模拟终端打印效果特效 <!DOCTYPE HTML> <html> <head> <title>模拟终端打印效果特效</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.

这里写图片描述

模拟终端打印效果特效

 <!DOCTYPE HTML>
<html>
    <head>
        <title>模拟终端打印效果特效</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                background: #000;
                font-size: 16px;
                overflow: auto;
                width: 100%;
                height: 100%;
            }
            #mainDiv {
                width: 80%;
                height: 600px;
                border: 1px solid red;
                margin: 0 auto;
            }
            #code {
                float: left;
                width: 440px;
                height: 400px;
                color: blue;
                font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
                font-size: 16px
            }
            #code .string {
                color: green;
            }
            #code .keyword {
                color: red;
                font-size: 20px;
            }
        </style>
    </head>

    <body>
        <div id="mainDiv">
            <div id="content">
                <div id="code">
                    <br /> 我的QQ: <span class="keyword">1010305129</span>
                    <br />
                    <span class="comments">/*************帝都雾霾有感*************/</span>
                    <br />
                    <span class="comments">*  诗歌一:雾霾</span>
                    <br />
                    <span class="comments">* 山外青山楼外楼, </span>
                    <br />
                    <span class="comments">* 旧宫雾霾几时休。 </span>
                    <br />
                    <span class="comments">* 毒风熏得游人醉,</span>
                    <br />
                    <span class="comments">* 直把帝都作非洲。</span>
                    <br />
                    <span class="comments">/*************帝都雾霾有感*************/</span>
                    <br />
                    <span class="keyword">欢迎切磋O(∩_∩)O哈哈~</span>
                    <br />
                </div>
            </div>
        </div>

        <script type="text/javascript">
            (function(a) {
                a.fn.typewriter = function() {
                    this.each(function() {
                        var d = a(this),
                            c = d.html(),
                            b = 0;
                        d.html("");
                        var e = setInterval(function() {
                            var f = c.substr(b, 1);
                            if (f == "<") {
                                b = c.indexOf(">", b) + 1
                            } else {
                                b++
                            }
                            d.html(c.substring(0, b) + (b & 1 ? "_" : ""));
                            if (b >= c.length) {
                                clearInterval(e)
                            }
                        }, 100)
                    });
                    return this
                }
            })(jQuery);
            $("#code").typewriter();
        </script>

    </body>

</html>

用云栖社区APP,舒服~

【云栖快讯】青年们,一起向代码致敬,来寻找第83行吧,云栖社区邀请大神彭蕾、多隆、毕玄、福贝、点评Review你的代码,参与互动者将选取50位精彩回复赠送“向代码致敬”定制T恤1件,最终成为“多隆奖”的小伙伴还将获得由阿里巴巴提供的“多隆奖”荣誉证书和奖杯。  详情请点击

网友评论

cometwo123
文章2705篇 | 关注25
关注
全球领先的SaaS性能测试平台,具有强大的分布式压测能力,可模拟海量用户真实的业务场景,让应... 查看详情
先知(安全情报)平台提供私密的安全众测服务,可帮助企业全面发现业务漏洞及风险,按效果付费。 查看详情
用于实时预测用户对物品偏好,支持企业定制推荐算法,支持A/B Test效果对比 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
520表白

520表白