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

这篇文章主要介绍了JavaScript与jQuery实现的闪烁输入效果,结合实例形式分别分析了JavaScript与jQuery实现闪烁输入效果的方法与具体使用技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

以上就是JavaScript与jQuery实现的闪烁输入效果的详细内容，更多请关注本站其它相关文章！