最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的。


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport"

     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>AutoType</title>

</head>

<body>

<div id="autotype"></div>

<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<script>

  $.fn.autotype = function (str, speed) {

    var self = this,

        defaultStr = '<p>我希望有个如你一般的人.</p><br>'

             +'<p>如山间清爽的风.</p><br>'

             +'<p>如古城温暖的光.</p><br>'

             +'<p>从清晨到夜晚.</p><br>'

             +'<p>由山野到书房.</p><br>'

             +'<p>只要最后是你,就好.</p><br>',//将要添加的元素的默认内容

        defaultSpeed = 100,

        str = str || defaultStr,

        speed = speed || defaultSpeed,

        index = 0,

        timer = setInterval(function () {

          var current = str.substr(index, 1);

          if (current == '<') {

            index = str.indexOf('>', index) + 1;

          } else {

            index++;

          }

          self.html(str.substring(0, index) + ( (index & 1) && (index != str.length) ? '_' : ''));

          if (index >= str.length) {

            clearInterval(timer);

          }

        }, speed);

  };

  $("#autotype").autotype();

</script>

</body>

</html>

本人才疏学浅,总觉得自己写的方法比较简陋,于是搜索了一波资料,发现有个不错的jQuery插件Typed.js。

Type.js的基础使用


<script src="jquery.js"></script>

<script src="typed.js"></script>

<script>

  $(function(){

    $(".element").typed({

      strings: ["First sentence.", "Second sentence."],

      typeSpeed: 0

    });

  });

</script>

...



<span class="element"></span>

插件为用户定制了许多默认设置与效果


<script>

  $(function(){

    $(".element").typed({

      strings: ["First sentence.", "Second sentence."],

      // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)

      stringsElement: null,

      // 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() {}

    });

  });

</script>

具体用法可以看看GitHub地址,带注释的源码400多行,不算复杂。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持新人网!

0 条评论

还没有人评论。
您需要登录后才可以回复。登录 | 立即注册