打字效果动画的4种实现方法(超简单)(2)

日期：2020-05-11 栏目：程序人生 浏览：次

调用Typed.js

var string = $('#content').val();
$('#content-item').typed({
 strings: ["　　" + string],
 typeSpeed: 50,
 backDelay: 800,
 loop: false,
 loopCount: false
});

方法四（纯js）：

html代码：

<div id="typing"></div>

js代码：

<script>
 var str = '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容';
 var i = 0;
 function typing(){
  var divTyping = document.getElementById('typing');
  if (i <= str.length) {
   divTyping.innerHTML = str.slice(0, i++) + '_';
   setTimeout('typing()', 200);
  }
  else{
   divTyping.innerHTML = str;
  }
 }
 typing();
</script>

最后，发现实现打字效果还是蛮简单的对吧，css的思路是利用width和overflow:hidden，动画让宽度变宽实现像打字的样式，但是样式有限，不能实现多行显示。js/jquery，普遍都是先得到字的内容，然后再逐字往容器中添加文字。问题不难，主要是要善于思考！！

以上这篇打字效果动画的4种实现方法(超简单)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持黑区网络。