JavaScript与jQuery实现的闪烁输入效果_javascript技巧-js教程-PHP中文网

JavaScript与jQuery实现的闪烁输入效果_javascript技巧

php中文网

发布： 2016-05-16 15:14:53

原创

1449人浏览过

本文实例讲述了javascript与jquery实现的闪烁输入效果。分享给大家供大家参考，具体如下：

html部分

<div id="code">
  <p>/**</p>
  <p>*2014-2-12</p>
  <p>*代码自动闪烁输入</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
  <p>*/</p>
  2014-2-14,I want to say:<br />
  Baby, I love you forever!<br />
</div>

登录后复制

js部分

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

function typewriter(id){
  var $ele = document.getElementById(id);
  var str = $ele.innerHTML, progress = 0;
  $ele.innerHTML = '';
  var timer = setInterval(function() {
    var current = str.substr(progress, 1);
    if (current == '<') {
      progress = str.indexOf('>', progress) + 1;
    } else {
      progress++;
    }
    $ele.innerHTML =str.substring(0, progress) + (progress & 1 &#63; '_' : '');
    if (progress >= str.length) {
      clearInterval(timer);
    }
  }, 75);
}

登录后复制

使用方法：

typewriter("code");

登录后复制

弄成个jquery插件

(function($) {
  $.fn.typewriter = function() {
    var $ele = $(this), str = $ele.html(), progress = 0;
    $ele.html('');
    var timer = setInterval(function() {
      var current = str.substr(progress, 1);
      if (current == '<') {
        progress = str.indexOf('>', progress) + 1;
      } else {
        progress++;
      }
      $ele.html(str.substring(0, progress) + (progress & 1 &#63; '_' : ''));
      if (progress >= str.length) {
        clearInterval(timer);
      }
    }, 75);
  };
})(jQuery);

登录后复制

使用方法：