纯 js 实现打字效果

简爱代码>JavaScript2014-11-18 10:39747117
看到有人需要,就把主题里面的代码整理了出来
代码就在下面具体怎么使用自己慢慢琢磨吧,挺简单的东西 并不复杂
首先就 就这么几个属性
classtxt-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>


本文出自简爱博客,转载时请注明出处及相应链接。

评论

  1. 上帝哥哥2016-03-05 10:00回复

    来看看

  2. 吴尼玛2015-01-11 00:06回复

    来看看

  3. 半沉2014-12-27 18:07回复

    有调用微语显示的吗[调皮/]

    1. 简爱2014-12-27 19:42回复

      @半沉:站内搜索 最新微语

  4. 半沉2014-12-22 23:54回复

    膜拜站长 希望我能学会

  5. 新手2014-12-21 13:29回复

    学习了

  6. 谷图2014-12-21 10:16回复

    为什么我看不了的

    1. 简爱2014-12-21 19:09回复

      @谷图:评论未审核的状态下,不会显示隐藏内容的,还有评论过后清除 Cookie 也不会显示隐藏内容

  7. 谷歌图2014-12-21 10:12回复

    感谢简爱

  8. sourmilk2014-12-09 11:33回复

    [呲牙/]瞧一瞧

  9. 每次都要回复2014-11-30 23:01回复

    每次都要回复。

    1. 简爱2014-11-30 23:32回复

      @每次都要回复:是不是设置推出浏览器清空个人数据了?
      清空 COOKIE 后 就会出现这种情况

  10. 清萍剑客2014-11-29 21:12回复

    学习下。

发表评论

电子邮件地址不会被公开。必填项已用*标注