中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)

方法一(純css實(shí)現(xiàn))：

為岱岳等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及岱岳網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、岱岳網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

html代碼：

<h2 class="typing typing-item">打字動(dòng)畫(huà)打字動(dòng)畫(huà)打字動(dòng)畫(huà)</h2>

css樣式：

.typing{
 font-size: 1rem;
 padding-top: 6%;
 margin-bottom: 5%;
 font-weight: normal;
 letter-spacing: .3rem;
 -webkit-animation: type 2s steps(50, end) forwards;
 animation: type 2s steps(50, end) forwards;
}
.typing-item{
 text-align: center;
 color: black;
 width:100%;
 white-space:nowrap;
 overflow:hidden;
}
@-webkit-keyframes type{
 from { width: 0;}
}

@keyframes type{
 from { width: 0;}
}

缺點(diǎn)：只能實(shí)現(xiàn)一行式的打字效果，無(wú)法打出一段落文字

方法二（jquery）:

html代碼：

<div class="text-container">
 <span class="text-static"></span>
 <span class="text"></span>
 <span class="cursor">|</span>
</div>

jquery代碼：

<script type="text/javascript" src="../js/jquery.js"></script>
<script>
  $(function() {
   myPrint(["hello my word!"], 100);

   function myPrint(arr, speed) {
    var index = 0;
    var str = arr[index];
    var i = 0;
    var add = true;
    var mySetInterval = setInterval(function() {
     // 延時(shí)4個(gè)字符的時(shí)間
     if (i == str.length + 4) {
      add = false;
      // 如果是最后一個(gè)字符串則終止循環(huán)函數(shù)
      if (index + 1 >= arr.length) {
       clearInterval(mySetInterval);
      }
     } else if (i == -2) {
      // 刪除后延時(shí)2個(gè)字符的時(shí)間
      add = true;
      str = arr[++index];
     }
     setTimeout(function() {
      if (add) {
       i++;
       $(".text").html(str.substring(0, i));
      } else {
       $(".text").html(str.substring(0, i - 1));
       i--;
      }
     })

    }, speed)
   }

  })
 </script>

方法三（jquery-typed插件）:

html代碼：

<div class="content">
 <div class="content-div">
  <span id="content-item"></span>
 </div>
</div>
<input type="hidden" id="content" value="內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容" />

引入Typed.js，Typed.js內(nèi)容如下

// The MIT License (MIT)

// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.




! function($) {

 "use strict";

 var Typed = function(el, options) {

  // chosen element to manipulate text
  this.el = $(el);

  // options
  this.options = $.extend({}, $.fn.typed.defaults, options);

  // attribute to type into
  this.isInput = this.el.is('input');
  this.attr = this.options.attr;

  // show cursor
  this.showCursor = this.isInput ? false : this.options.showCursor;

  // text content of element
  this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text()

  // html or plain text
  this.contentType = this.options.contentType;

  // typing speed
  this.typeSpeed = this.options.typeSpeed;

  // add a delay before typing starts
  this.startDelay = this.options.startDelay;

  // backspacing speed
  this.backSpeed = this.options.backSpeed;

  // amount of time to wait before backspacing
  this.backDelay = this.options.backDelay;

  // input strings of text
  this.strings = this.options.strings;

  // character number position of current string
  this.strPos = 0;

  // current array position
  this.arrayPos = 0;

  // number to stop backspacing on.
  // default 0, can change depending on how many chars
  // you want to remove at the time
  this.stopNum = 0;

  // Looping logic
  this.loop = this.options.loop;
  this.loopCount = this.options.loopCount;
  this.curLoop = 0;

  // for stopping
  this.stop = false;

  // custom cursor
  this.cursorChar = this.options.cursorChar;

  // shuffle the strings
  this.shuffle = this.options.shuffle;
  // the order of strings
  this.sequence = [];

  // All systems go!
  this.build();
 };

 Typed.prototype = {

  constructor: Typed

  ,
  init: function() {
   // begin the loop w/ first current string (global self.string)
   // current string will be passed as an argument each time after this
   var self = this;
   self.timeout = setTimeout(function() {
    for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;

    // shuffle the array if true
    if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);

    // Start typing
    self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
   }, self.startDelay);
  }

  ,
  build: function() {
   // Insert cursor
   if (this.showCursor === true) {
    this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>");
    this.el.after(this.cursor);
   }
   this.init();
  }

  // pass current string state to each function, types 1 char per call
  ,
  typewrite: function(curString, curStrPos) {
   // exit when stopped
   if (this.stop === true) {
    return;
   }

   // varying values for setTimeout during typing
   // can't be global since number changes each time loop is executed
   var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
   var self = this;

   // ------------- optional ------------- //
   // backpaces a certain string faster
   // ------------------------------------ //
   // if (self.arrayPos == 1){
   // self.backDelay = 50;
   // }
   // else{ self.backDelay = 500; }

   // contain typing function in a timeout humanize'd delay
   self.timeout = setTimeout(function() {
    // check for an escape character before a pause value
    // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
    // single ^ are removed from string
    var charPause = 0;
    var substr = curString.substr(curStrPos);
    if (substr.charAt(0) === '^') {
     var skip = 1; // skip atleast 1
     if (/^\^\d+/.test(substr)) {
      substr = /\d+/.exec(substr)[0];
      skip += substr.length;
      charPause = parseInt(substr);
     }

     // strip out the escape character and pause value so they're not printed
     curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
    }

    if (self.contentType === 'html') {
     // skip over html tags while typing
     var curChar = curString.substr(curStrPos).charAt(0)
     if (curChar === '<' || curChar === '&') {
      var tag = '';
      var endTag = '';
      if (curChar === '<') {
       endTag = '>'
      } else {
       endTag = ';'
      }
      while (curString.substr(curStrPos).charAt(0) !== endTag) {
       tag += curString.substr(curStrPos).charAt(0);
       curStrPos++;
      }
      curStrPos++;
      tag += endTag;
     }
    }

    // timeout for any pause after a character
    self.timeout = setTimeout(function() {
     if (curStrPos === curString.length) {
      // fires callback function
      self.options.onStringTyped(self.arrayPos);

      // is this the final string
      if (self.arrayPos === self.strings.length - 1) {
       // animation that occurs on the last typed string
       self.options.callback();

       self.curLoop++;

       // quit if we wont loop back
       if (self.loop === false || self.curLoop === self.loopCount)
        return;
      }

      self.timeout = setTimeout(function() {
       self.backspace(curString, curStrPos);
      }, self.backDelay);
     } else {

      /* call before functions if applicable */
      if (curStrPos === 0)
       self.options.preStringTyped(self.arrayPos);

      // start typing each new char into existing string
      // curString: arg, self.el.html: original text inside element
      var nextString = curString.substr(0, curStrPos + 1);
      if (self.attr) {
       self.el.attr(self.attr, nextString);
      } else {
       if (self.isInput) {
        self.el.val(nextString);
       } else if (self.contentType === 'html') {
        self.el.html(nextString);
       } else {
        self.el.text(nextString);
       }
      }

      // add characters one by one
      curStrPos++;
      // loop the function
      self.typewrite(curString, curStrPos);
     }
     // end of character pause
    }, charPause);

    // humanized value for typing
   }, humanize);

  }

  ,
  backspace: function(curString, curStrPos) {
   // exit when stopped
   if (this.stop === true) {
    return;
   }

   // varying values for setTimeout during typing
   // can't be global since number changes each time loop is executed
   var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
   var self = this;

   self.timeout = setTimeout(function() {

    // ----- this part is optional ----- //
    // check string array position
    // on the first string, only delete one word
    // the stopNum actually represents the amount of chars to
    // keep in the current string. In my case it's 14.
    // if (self.arrayPos == 1){
    // self.stopNum = 14;
    // }
    //every other time, delete the whole typed string
    // else{
    // self.stopNum = 0;
    // }

    if (self.contentType === 'html') {
     // skip over html tags while backspacing
     if (curString.substr(curStrPos).charAt(0) === '>') {
      var tag = '';
      while (curString.substr(curStrPos).charAt(0) !== '<') {
       tag -= curString.substr(curStrPos).charAt(0);
       curStrPos--;
      }
      curStrPos--;
      tag += '<';
     }
    }

    // ----- continue important stuff ----- //
    // replace text with base text + typed characters
    var nextString = curString.substr(0, curStrPos);
    if (self.attr) {
     self.el.attr(self.attr, nextString);
    } else {
     if (self.isInput) {
      self.el.val(nextString);
     } else if (self.contentType === 'html') {
      self.el.html(nextString);
     } else {
      self.el.text(nextString);
     }
    }

    // if the number (id of character in current string) is
    // less than the stop number, keep going
    if (curStrPos > self.stopNum) {
     // subtract characters one by one
     curStrPos--;
     // loop the function
     self.backspace(curString, curStrPos);
    }
    // if the stop number has been reached, increase
    // array position to next string
    else if (curStrPos <= self.stopNum) {
     self.arrayPos++;

     if (self.arrayPos === self.strings.length) {
      self.arrayPos = 0;

      // Shuffle sequence again
      if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);

      self.init();
     } else
      self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
    }

    // humanized value for typing
   }, humanize);

  }
  /**
   * Shuffles the numbers in the given array.
   * @param {Array} array
   * @returns {Array}
   */
  ,shuffleArray: function(array) {
   var tmp, current, top = array.length;
   if(top) while(--top) {
    current = Math.floor(Math.random() * (top + 1));
    tmp = array[current];
    array[current] = array[top];
    array[top] = tmp;
   }
   return array;
  }

  // Start & Stop currently not working

  // , stop: function() {
  //  var self = this;

  //  self.stop = true;
  //  clearInterval(self.timeout);
  // }

  // , start: function() {
  //  var self = this;
  //  if(self.stop === false)
  //  return;

  //  this.stop = false;
  //  this.init();
  // }

  // Reset and rebuild the element
  ,
  reset: function() {
   var self = this;
   clearInterval(self.timeout);
   var id = this.el.attr('id');
   this.el.after('<span id="' + id + '"/>')
   this.el.remove();
   if (typeof this.cursor !== 'undefined') {
    this.cursor.remove();
   }
   // Send the callback
   self.options.resetCallback();
  }

 };

 $.fn.typed = function(option) {
  return this.each(function() {
   var $this = $(this),
    data = $this.data('typed'),
    options = typeof option == 'object' && option;
   if (!data) $this.data('typed', (data = new Typed(this, options)));
   if (typeof option == 'string') data[option]();
  });
 };

 $.fn.typed.defaults = {
  strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
  // typing speed
  typeSpeed: 0,
  // time before typing starts
  startDelay: 0,
  // backspacing speed
  backSpeed: 0,
  // shuffle the strings
  shuffle: false,
  // time before backspacing
  backDelay: 500,
  // loop
  loop: false,
  // false = infinite
  loopCount: false,
  // show cursor
  showCursor: true,
  // character for cursor
  cursorChar: "|",
  // attribute to type (null == text)
  attr: null,
  // either html or text
  contentType: 'html',
  // call when done callback function
  callback: function() {},
  // starting callback function before each string
  preStringTyped: function() {},
  //callback for every typed string
  onStringTyped: function() {},
  // callback for reset
  resetCallback: function() {}
 };


}(window.jQuery);

調(diào)用Typed.js

var string = $('#content').val();
$('#content-item').typed({
 strings: ["　　" + string],
 typeSpeed: 50,
 backDelay: 800,
 loop: false,
 loopCount: false
});

方法四（純js）：

html代碼：

<div id="typing"></div>

js代碼：

<script>
 var str = '內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容';
 var i = 0;
 function typing(){
  var divTyping = document.getElementById('typing');
  if (i <= str.length) {
   divTyping.innerHTML = str.slice(0, i++) + '_';
   setTimeout('typing()', 200);
  }
  else{
   divTyping.innerHTML = str;
  }
 }
 typing();
</script>

最后，發(fā)現(xiàn)實(shí)現(xiàn)打字效果還是蠻簡(jiǎn)單的對(duì)吧，css的思路是利用width和overflow:hidden，動(dòng)畫(huà)讓寬度變寬實(shí)現(xiàn)像打字的樣式，但是樣式有限，不能實(shí)現(xiàn)多行顯示。js/jquery，普遍都是先得到字的內(nèi)容，然后再逐字往容器中添加文字。問(wèn)題不難，主要是要善于思考?。?/p>

以上這篇打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱：打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)
網(wǎng)站地址：http://www.rwnh.cn/article34/gopise.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站
汤原县| 武城县| 射阳县| 阆中市| 余庆县| 搜索| 武宣县| 双柏县| 阳城县| 桂平市| 永和县| 宜章县| 绥阳县| 东海县| 岑溪市| 南雄市| 肥东县| 巧家县| 柳林县| 昆明市| 纳雍县| 凭祥市| 普兰店市| 香格里拉县| 淮南市| 桓台县| 盐池县| 宣恩县| 白水县| 行唐县| 油尖旺区| 永胜县| 石嘴山市| 河津市| 桃园市| 虎林市| 山阴县| 东山县| 日喀则市| 鹿邑县| 获嘉县|