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();
  • 相关阅读:
    docker架构的详解
    docker的核心原理-cgroup
    网络运维面试题
    100道linux运维笔试题
    运维岗位面试题集合
    python——筛子游戏
    同道前辈
    delphi中使用SocketStream读写数据的技巧
    百度地图API
    HTML中小meta的大作用
  • 原文地址:https://www.cnblogs.com/iphone6s/p/5039206.html
Copyright © 2011-2022 走看看