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