JavaScript與jQuery實現(xiàn)的閃爍輸入效果
本文實例講述了JavaScript與jQuery實現(xiàn)的閃爍輸入效果。分享給大家供大家參考,具體如下:
html部分
<div id="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代碼自動閃爍輸入</p> <p>*/</p> 2014-2-14,I want to say:<br /> Baby, I love you forever!<br /> </div>
js部分
function typewriter(id){ var $ele = document.getElementById(id); var str = $ele.innerHTML, progress = 0; $ele.innerHTML = ''; var timer = setInterval(function() { var current = str.substr(progress, 1); if (current == '<') { progress = str.indexOf('>', progress) + 1; } else { progress++; } $ele.innerHTML =str.substring(0, progress) + (progress & 1 ? '_' : ''); if (progress >= str.length) { clearInterval(timer); } }, 75); }
使用方法:
typewriter("code");
弄成個jquery插件
(function($) { $.fn.typewriter = function() { var $ele = $(this), str = $ele.html(), progress = 0; $ele.html(''); var timer = setInterval(function() { var current = str.substr(progress, 1); if (current == '<') { progress = str.indexOf('>', progress) + 1; } else { progress++; } $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : '')); if (progress >= str.length) { clearInterval(timer); } }, 75); }; })(jQuery);
使用方法 :
$("#code").typewriter();
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript擴展技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript數(shù)學(xué)運算用法總結(jié)》及《javascript面向?qū)ο笕腴T教程》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法
下面小編就為大家分享一篇js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12JavaScript之Map和Set_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細介紹了JavaScript之Map和Set的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06最好用的省市二級聯(lián)動 原生js實現(xiàn)你值得擁有
省市二級聯(lián)動效果,實現(xiàn)方法有很多,不過其他文章中介紹的都比較籠統(tǒng),在本文有一個詳細的實現(xiàn)過程,使用原生js很容易理解,希望大家可以參考下2013-09-09webpack.DefinePlugin與cross-env區(qū)別詳解
這篇文章主要介紹了webpack.DefinePlugin與cross-env區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02JavaScript與DropDownList 區(qū)別分析
大家都知道,.NET中一些Web服務(wù)器控件解析并編譯,最終被渲染的時候,其實是轉(zhuǎn)化成了普通的html控件。2010-01-01Javascript基礎(chǔ)之?dāng)?shù)組的使用
這篇文章主要介紹了Javascript基礎(chǔ)之?dāng)?shù)組的使用的相關(guān)資料,介紹的非常詳解,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05