這次帶給大家讓文字動效的JavaScript程式碼,用JavaScript程式碼讓文字動效的注意事項有哪些,以下就是實戰案例,一起來看一下。
有時你會希望給你的一段文字增加動效,讓其中的每個字都動起來。你可以使用下面這段jQuery外掛程式碼來達到這個效果。當然你要結合一個CSS3 transition樣式來達到更好的效果。
$.fn.animateText = function(delay, klass) { var text = this.text(); var letters = text.split(''); return this.each(function(){ var $this = $(this); $this.html(text.replace(/./g, '<span class="letter">$&</span>')); $this.find('span.letter').each(function(i, el){ setTimeout(function(){ $(el).addClass(klass); }, delay * i); }); }); };
使用方法:
$('p').animateText(15, 'foo');
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
JavaScript執行機制之為什麼JavaScript是單執行緒
以上是讓文字動效的JavaScript程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!