日期:2014-05-16  浏览次数:20414 次

想挑战的师兄师姐们空余的时间进来看看吧 急!!!!
想在这个页面上插入一个或一个区域实现文字的逐字显示且能实现分行、缩进。
这是云盘连接网页效果代码都已打包  师哥师姐们打开看一下就行!!谢谢
http://pan.baidu.com/s/19reu9

------解决方案--------------------
弄个浮动层浮动在canvas上就行了吧
<html><head><style>html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}
#word{position:absolute;color:White;top:25%;left:40%;width:20%;height:50%;z-index:10000}
</style></head><body>
<div id="word"></div>
<canvas id="pinkboard" width="581" height="316"></canvas>
<script type="text/javascript">
    function type(txt) {

        var text = "123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890";
        var textLen = text.length;
        var lineNum = 30; //定义每行显示多少个字
        var num = 0;
        var _ = document.createTextNode('_');
        var i = 0;
        var me = this;
        this.show = function () {
            str = text.substr(i, 1);
            var txt = document.getElementById('word');
            txt.appendChild(document.createTextNode(str));
            txt.appendChild(_);

            num++;
            if (num > 0 && num % lineNum == 0) txt.appendChild(document.createElement('br'));

            i++;
            if (i < textLen) setTimeout(function () { me.show() }, 300); else txt.removeChild(_);
        }
        this.show();
    }
    new type(document.getElementById('word'));


var settings = {
  particles: {
    length:   500, // maximum amount of particles
    duration:   2, // particle du