纯 js 实现打字效果
看到有人需要，就把主题里面的代码整理了出来
代码就在下面具体怎么使用自己慢慢琢磨吧，挺简单的东西 并不复杂
首先就 就这么几个属性
又补充了一下 添加 jQuery 兼容 IE8 (本站就不用看试了，懒得改了
)
代码如下：
代码就在下面具体怎么使用自己慢慢琢磨吧，挺简单的东西 并不复杂
首先就 就这么几个属性
classtxt-rotatedata-rotate 眼线是的内容 JSON 格式data-period 显示完每一段的 延时 单位毫秒又补充了一下 添加 jQuery 兼容 IE8 (本站就不用看试了，懒得改了
)代码如下：
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/><script src="http://api。asilu.com/cdn/jquery.js"></script> <h1>打字效果演示</h1><p><span class='txt-rotate' data-rotate='["测试第 1 段", "测试第 2 段", "测试第 3 段", "测试第 4 段"]' data-period='300' >为了保险这里填写 默认文本</span> </p><h4 class='txt-rotate' data-rotate='["有小问题的话可以在QQ群:53571807 里询问，没必要加好友的，好友一多就分不清谁是谁了 ^_^", "终于回来了。。。", "我给你写五万字都行，我 我这不是怕您一读就读成十万字了吗就"]'>为了保险这里填写 默认文本</h4> <script>var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = period || 2000; this.txt = ""; this.tick(); this.isDeleting = false};TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1) } else { this.txt = fullTxt.substring(0, this.txt.length + 1) } this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>"; var that = this; var delta = 150 - Math.random() * 100; if (this.isDeleting) { delta /= 2 } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true } else { if (this.isDeleting && this.txt === "") { this.isDeleting = false; this.loopNum++; delta = 500 } } setTimeout(function() { that.tick() }, delta)}; // 以下方法 可二选一，看个人需要 /* // 1. 支持 getElementsByClassName 的情况下使用 (不兼容 IE8-)var elements = document.getElementsByClassName("txt-rotate");if (elements) { for (var i = 0; i < elements.length; i++) { var toRotate = elements[i].getAttribute("data-rotate"); var period = elements[i].getAttribute("data-period"); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period) } }}*/ // 2. 不支持 getElementsByClassName 的情况 (兼容 IE8, 需要 jQuery)$('.txt-rotate').each(function(){ a = $(this); toRotate = a.data('rotate'); period = a.data('period'); if (toRotate) { new TxtRotate(this, toRotate, (period ? period : 5000)) }})</script>运行代码
