JavaScript与jQuery实现的闪烁输入效果

本文实例讲述了JavaScript与jQuery实现的闪烁输入效果。分享给大家供大家参考，具体如下：
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（）;

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。