iTyped: 仿文字输入效果 纯 JS 仅 2KB 大小
pqoo5348
8年前
<p>仿文字输入这个特效很早就有了,比如《 制作有吸引力的文字动画效果-textillate.js 》有介绍,然而更轻量更简单,而且不需要 jQuery 库的 JS,这里我就推荐 iTyped。简单实用,Tiny 版只有1.9KB 大小,下面来看看介绍。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/752c13c2f33b1cfd50d4f954c8234dab.gif"></p> <p>插件名称:iType.js</p> <p>在线演示: <a href="/misc/goto?guid=4959737531818540507" rel="nofollow,noindex">https://ityped.surge.sh/</a></p> <p>下载地址: <a href="/misc/goto?guid=4959737531921439406" rel="nofollow,noindex">https://github.com/luisvinicius167/ityped</a></p> <p>小编认为这个方便之处就是不需要 jQuery 库以及轻量级,而且使用起来不麻烦。</p> <h3>使用教程</h3> <p>STEP 1 : 引入 ityped.js</p> <pre> <code class="language-javascript"><script src="https://unpkg.com/ityped@0.0.5"></script></code></pre> <p>STEP 2 : HTML 代码</p> <pre> <code class="language-javascript"><span id="ityped"></span></code></pre> <p>STEP 3: JS代码</p> <pre> <code class="language-javascript"><script> ityped.init('#ityped', { strings:['我是文字一哦', '我是文字二哦', '我是文字3哦', '没有文字啦。。。'], startDelay: 200, loop: true }); </script></code></pre> <p> </p> <p> </p> <p>来自:http://www.shejidaren.com/ityped.html</p> <p> </p>