之前做了个测试小游戏(姑且叫游戏吧)为了增加神秘性,就想给她加个逐字输入效果;刚好在网上找到一个挺好用的,于是就发扬拿来主义;按照自己的喜好做了一丢丢的修改(勉强算是吧\( ̄︶ ̄)> )

代码:

$.fn.autotype = function() {
var _this=$(this);
var str=_this.html();
// 正则替换代码行之间添加的多个空格,不去除换行输出会有明显的停顿:实际是在输出多个空格
str=str.replace(/(\s){2,}/g,"$1");
var index = 0;
$(this).html('');
var timer = function() {
var args=arguments;
var current = str.slice(index, index+1);
if (current == '<'){
index = str.indexOf('>', index) + 1;
}
else{
  index++;
}
//位运算符: 根据setInterval运行奇偶次来判断是否加入下划线字符“|”,使输入效果更逼真
if (index < str.length-1){
//打印字符倒数第2个字符开始,不加“|”,以防止结束符可能会多输出“|”字符
_this.html(str.substring(0, index) + (index & 1 ? '<span class="loop">|</span>' : ''));
}else{
_this.html(str.substring(0, index));
return false;
};
// 延迟开始时间
setTimeout(args.callee,150)
};
setTimeout(timer,1000);
};

效果:

我也会有失望的时候

抱怨生活对我不够好

不能像电影一样

情节曲折结局依旧

出处:http://www.phpvar.com/archives/2865.html

jQuery实现逐字输入效果的更多相关文章

  1. jquery删除添加输入文本框

    效果体验:http://hovertree.com/texiao/jquery/67/ 效果图: 参考:http://hovertree.com/h/bjaf/traversing_each.htm ...

  2. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. jquery Jquery 遍历 获取设置 效果

    speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...

  5. Jquery简单的placeholder效果

    Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...

  6. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  7. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  8. jquery实现章节目录效果

    <html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...

  9. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

随机推荐

  1. 关于Oracle中查询结果为未选定行

    今天在做关于Oracle查询语句的练习时,碰到这么一个题目:找出EMP表中姓名(ENAME)第三个字母是A的员工姓名.我的Scott.emp表的现有数据如下: SQL> select * fro ...

  2. Sicily 1790. Single Round Match

    高进度求余 或者 将一个数奇位上的数字与偶位上的数字分别加起来,再求它们的差,如果这个差是11的倍数(包括0),那么,原来这个数就一定能被11整除. #include <iostream> ...

  3. AJAX防重复提交的办法总结

    最近的维护公司的一个代理商平台的时候,客服人员一直反映说的统计信息的时候有重复数据,平台一直都很正常,这个功能是最近新进的一个实习生同事写的功能,然后就排查问题人所在,发现新的这个模块的AJAX提交数 ...

  4. 定制化Azure站点Java运行环境(5)

    Java 8下PermGen及参数设置 在上一章节中,我们定制化使用了Java 8环境,使用我们的测试页面打印出了JVM基本参数,但如果我们自己观察,会发现在MXBeans中,没有出现PermGen的 ...

  5. 局域网内IP冲突怎么办

      对于在Internet和Intranet网络上,使用TCP/IP协议时每台主机必须具有独立的IP地址,有了IP地址的主机才能与网络上的其它主机进行通讯.但IP地址冲突会造成网络客户不能正常工作,只 ...

  6. USB 传输协议

    Pipe USB的pipe的两端分别指的是USB host端的内存区域,和设备端的endpoint. pipe分为两类,一类是stream pipe, 另一类是message pipe. 两类的主要区 ...

  7. GO的GDB调试

    GoLang语言,学了很久,一直觉得它单步调试有较多问题,最近才知道自已对它了解得太少了.原来GO语言对GDB的版本是至少为gdb7以上,才能比较好的打印任意变量,如果低于这个版本,则才会出一些问题. ...

  8. Delphi HTML5 Canvas组件

    最近去sourceforge瞎转悠,突然发了一个组件,关于Delphi下Html5的canvas的组件,大概浏览了一下源码,竟然是纯粹的Pascal代码,也就说完全的Delphi代码.不敢独享,现在上 ...

  9. 在类似qq或者微信聊天中。如何根据不同的手机发送图片

    原文:在类似qq或者微信聊天中.如何根据不同的手机发送图片   前一段时间,公司自己要求做多客服开发,但是对于发送图片这一块,当时很苦恼,我用自己的手机(米2)测试,不管是本地,还是云相册,最新照片. ...

  10. (一)boost库之日期、时间

    (一)boost库之日期.时间 一.计时器  计时器,通常在一个项目中统计一个函数的执行时间是非常实用的.   #include <boost/timer.hpp> void PrintU ...