JavaScript与jQuery实现的闪烁输入效果
本文实例讲述了JavaScript与jQuery实现的闪烁输入效果。分享给大家供大家参考,具体如下:
html部分
<divid="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代码自动闪烁输入</p> <p>*/</p> 2014-2-14,Iwanttosay:<br/> Baby,Iloveyouforever!<br/> </div>
js部分
functiontypewriter(id){ var$ele=document.getElementById(id); varstr=$ele.innerHTML,progress=0; $ele.innerHTML=''; vartimer=setInterval(function(){ varcurrent=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(''); vartimer=setInterval(function(){ varcurrent=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();
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。