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程序设计有所帮助。