简爱博客
纯 js 实现打字效果
2014-11-18 简爱
看到有人需要,就把主题里面的代码整理了出来

代码就在下面具体怎么使用自己慢慢琢磨吧,挺简单的东西 并不复杂

首先就 就这么几个属性

class txt-rotate

data-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> &nbsp; </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>




评论:
上帝哥哥
2016-03-05 10:00 回复
来看看
吴尼玛
2015-01-11 00:06 回复
来看看
简爱
2014-12-27 19:42 回复
@半沉:站内搜索 最新微语
半沉
2014-12-27 18:07 回复
有调用微语显示的吗[调皮/]
半沉
2014-12-22 23:54 回复
膜拜站长 希望我能学会
简爱
2014-12-21 19:09 回复
@谷图:评论未审核的状态下,不会显示隐藏内容的,还有评论过后清除 Cookie 也不会显示隐藏内容
新手
2014-12-21 13:29 回复
学习了
谷图
2014-12-21 10:16 回复
为什么我看不了的
谷歌图
2014-12-21 10:12 回复
感谢简爱
sourmilk
2014-12-09 11:33 回复
[呲牙/]瞧一瞧
1 2