微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

本文实例讲述了JavaScript与jQuery实现的闪烁输入效果分享给大家供大家参考,具体如下:

html部分

rush:xhtml;">
/**

*2014-2-12

*代码自动闪烁输入

*/

2014-2-14,I want to say:
Baby,I love you forever!

js部分

rush: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); }

使用方法

rush:js;"> typewriter("code");

弄成个jquery插件

rush:js;"> (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);

使用方法

rush:js;"> $("#code").typewriter();

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《

希望本文所述对大家JavaScript程序设计有所帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐