h5字体逐字展开效果

其实做法还是很简单的，主要是用到substring()这个方法，下面先解释下substring()这个方法的说明及用法：

js官方的解释：

substring(start,stop) 方法用于提取字符串中介于两个指定下标之间的字符。

举个例子：

<div>

    <p id="demo">我就是个demo</p>

</div>

<script>

var oTex = document.getElementById('demo');

console.log(oTex.innerHTML.substring(0,2))

</script>

以上例子就可以直观的看出substring()是可以用于截取字符串内容；

了解了这个我们就很清楚了字体逐渐展开的制作原理了，就是将已有的一段字隐藏，然后用substring()去获取隐藏的字符串内容，将获取到的内容逐渐贴到新的便签里。可能描述的有些简单，下面举例说明下：

<div>

<p style="display:none" id="oTex1">

这里面的内容我将逐渐的展开，请拭目以待！！

</p>

<h1>    

        以下为展示区域

</h1>

<p id="oTex2">

</p>

</div>

<script>

var oTex1 = document.getElementById('oTex1'),

    oTex2 = document.getElementById('oTex2'),

    i = 0,

    timer = setInterval(function(){

    oTex2.innerHTML = oTex1.innerHTML.substring(0,i);

    i++;

    if(oTex2.innerHTML  == oTex1.innerHTML){    

       clearInterval(timer);

};

},60);

</script>

小白第一次写简书还是有点蒙，有不对的地方大神还请指出。