本文实例讲述了javascript与jquery实现的闪烁输入效果。分享给大家供大家参考,具体如下:
html部分
/**
*2014-2-12
*代码自动闪烁输入
*/
2014-2-14,i want to say:
baby, i love you forever!
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) + 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) + 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程序设计有所帮助。