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

代码:

$.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. delphi access中SQL根据时间查询

    Access数据库虽然功能是差了点,但是有时对一些少量的数据保存很是很方便的,在delphi中也是如此,在查询时免不了要按照日期或 时间作为查询条件,access有些特别. select * from ...

  2. [转载]vs2010中臃肿的ipch和sdf文件

    使用VS2010建立C++解决方案时,会生成SolutionName.sdf和一个叫做ipch的文件夹,这两个文件再加上*.pch等文件使得工程变得非常的庞大,一个简单的程序都会占用几十M的硬盘容量, ...

  3. C++标准程序读书笔记-第三章错误和异常处理

    1.命名空间(namespace)std C++标准程序库中的所有标示符都被定义于一个名为std的namespace 2.标准异常类别 (1)语言本身或标准程序库所抛出的所有异常,都派生自基类exce ...

  4. Go 语言读写 Excel

    Excelize 是 Golang 编写的一个用来操作 Office Excel 文档类库,基于微软的 Office OpenXML 标准.可以使用它来读取.写入 XLSX 文件.相比较其他的开源类库 ...

  5. 播放器音乐源之天天动听API

    搜索歌曲API:http://so.ard.iyyin.com/s/song_with_out?q={0}&page={1}&size={2} {0}=需要搜索的歌曲或歌手 {1}=查 ...

  6. <link>: rel, href

    Reference: http://www.w3schools.com/tags/tag_link.asp <link> Attributes: Attribute Value Descr ...

  7. python针对于mysql的增删改查

    无论是BS还是CS得项目,没有数据库是不行的. 本文是对python对mysql的操作的总结.适合有一定基础的开发者,最好是按部就班学习的人阅读.因为我认为人生不能永远都是从零开始,那简直就是灾难. ...

  8. Javascript自定义类

    JavaScript并不是严格的面向对象的语言,但是带有面向对象的一些特性,我们可以通过这些特性创建js中的自定义类. JavaScript中的类其实是function关键字包裹的一系列变量和方法. ...

  9. iOS正则表达式的使用

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. TensorFlow深度学习笔记 Tensorboard入门

    转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程: https://ww ...