zoukankan      html  css  js  c++  java
  • 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();
  • 相关阅读:
    回顾初心
    团队作业6(代码复审+事后诸葛亮)
    Alpha阶段项目复审(鸽牌开发小分队)
    事后诸葛亮(鸽牌开发小分队)
    团队作业5
    第七篇Scrum冲刺博客
    第六篇Scrum冲刺博客
    第五篇Scrum冲刺博客
    第四篇Scrum冲刺博客
    第三篇Scrum冲刺博客
  • 原文地址:https://www.cnblogs.com/iphone6s/p/5039206.html
Copyright © 2011-2022 走看看