最近在網上看到一個字符逐個出現的打字效果，覺得挺有趣的，想一想基本實現思路就是設置一個定時器逐然后逐個向容器中添加字符，于是就基于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="http://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多行，不算復雜。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
