利用jQuery實現打字機字幕效果執行個體代碼_jquery

實現效果：

實現原理：

把html裡的代碼讀進來，

然後跳過“<”和“>”之間的代碼，

順便儲存了內容的格式，

然後一個定時器，逐個輸出。

用到的基礎知識：

jQuery為開發外掛程式提拱了兩個方法，分別是：

     jQuery.fn.extend(object);

    jQuery.extend(object);

jQuery.extend(object); 為擴充jQuery類本身.為類添加新的方法。

jQuery.fn.extend(object);給jQuery對象添加方法。

$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery執行個體每一個有效。 

如擴充$.fn.abc() 

那麼你可以這樣子：$("#div").abc();

$.fx是指jquery的特效。 

如使用顯示、滑動、淡入淡出、動畫等。 

$.fx.off可以關閉動畫，其實是直接顯示結果。

實現代碼：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="keyword" content=""><meta name="description" content=""></head><body><div class="autotype" id="autotype"><p>一場雨把我困在這裡</p><br/><p>你溫柔的表情</p><p>會讓我傷心</p><br/><p>六月的雨，只是無情的你~</p></div><script src="http://file2.ci123.com/ast/js/jquery_172.js"></script><script>$.fn.autotype = function(){var $text = $(this);console.log('this',this);var str = $text.html();//返回被選 元素的內容var index = 0;var x = $text.html('');//$text.html()和$(this).html('')有區別var timer = setInterval(function(){//substr(index, 1) 方法在字串中抽取從index下標開始的一個的字元var current = str.substr(index, 1);if(current == '<'){//indexOf() 方法返回">"在字串中首次出現的位置。index = str.indexOf('>', index) + 1;}else{index ++ ;}//console.log(["0到index下標下的字元",str.substring(0, index)],["符號",index & 1 ? '_': '']);//substring() 方法用於提取字串中介於兩個指定下標之間的字元$text.html(str.substring(0, index) + (index & 1 ? '_': ''));if(index >= str.length){clearInterval(timer);}},100);};$("#autotype").autotype();</script></body></html>

拓展

再簡單介紹下jQuery的$.extend：

$.extend

擴充jQuery對象本身。

用來在jQuery命名空間上增加新函數。

如下：在jQuery命名空間上增加兩個函數。

<html><head><meta charset="utf-8"></head><body><script src="http://file2.ci123.com/ast/js/jquery_172.js"></script><script>jQuery.extend({min:function(a, b){return a < b ? a : b;},max:function(a, b){return a < b ? a : b}});alert("min" + "——" + jQuery.min(1, 2));alert("max" + "——" + jQuery.max(6, 8));</script></body></html>

總結

大家可以自己操作看下效果，這樣更容易理解學習，以上就是這篇文章的全部內容，希望對大家的學習和工作能有所協助，如果有疑問可以留言交流。