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

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

html部分

  

  2014-2-14,I want to say:

  Baby, I love you forever!

js部分

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 ? '_' : '');
    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 ? '_' : ''));
      if (progress >= str.length) {
 clearInterval(timer);
      }
    }, 75);
  };
})(jQuery);

使用方法 ：

$("#code").typewriter();

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript中json操作技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript扩展技巧总结》、《Javascript运动效果与技巧汇总》、《Javascript数学运算用法总结》及《javascript面向对象入门教程》

希望本文所述对大家Javascript程序设计有所帮助。