JS 打字机效果

HTML DOM

<div id="code">
   <font color="#FF0000">
    <span>我送过你礼物 </span><br>
    <span>试过对你不管不顾 </span><br>
    <span>我挂过你电话 </span><br>
    <span>也曾为你哭到沙哑 </span><br>
    <span>我曾经为你去学做过晚餐 </span><br>
    <span>曾觉得你的关心太烦 </span><br>
    <span>也曾为你起得很早 </span><br>
    <span>试过狠心把你甩掉 </span><br>
    <span>试过偷偷拍你的微笑 </span><br>
    <span> 也曾经把你电话删掉 </span><br>
    <span>我给过你承诺 </span><br>
    <span>试过不承认犯的错 </span><br>
    <span>我幻想过如果和你过一辈子不错</span><br>
    <span>捱过了四季才明白你就是我追随不落的日月</span><br>
    <span>-- 爱你的我--</span>
   </font>
  </div>

 

JS

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

 

posted @ 2015-12-11 15:30  浪漫古心枫  阅读(360)  评论(1)  编辑  收藏  举报