闪烁输入效果

2019独角兽企业重金招聘Python工程师标准>>>

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();

转载于:https://my.oschina.net/wbo0801/blog/199170