参考:http://rxshc.com/archives/659.html

html:

<span id="text">我与父亲不相见已二年余了,我最不能忘记的是他的背影。\n 那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,"事已如此,不必难过,好在天无绝人之路!"   回家变卖典质,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。   到南京时,有朋友约去游逛,勾留了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房,甚是仔细。但他终于不放心,怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁,北京已来往过两三次,是没有甚么要紧的了。他踌躇了一会,终于决定还是自己送我去。我两三回劝他不必去;他只说,"不要紧,他们去不好!"   我们过了江,进了车站。我买票,他忙着照看行李。行李太多了,得向脚夫行些小费,才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分,总觉他说话不大漂亮,非自己插嘴不可。但他终于讲定了价钱;就送我上车。他给我拣定了靠车门的一张椅子;我将他给我做的紫毛大衣铺好坐位。他嘱我路上小心,夜里警醒些,不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂;他们只认得钱,托他们直是白托!而且我这样大年纪的人,难道还不能料理自己么?唉,我现在想想,那时真是太聪明了!   我说道,"爸爸,你走吧。"他望车外看了看,说,"我买几个橘子去。你就在此地,不要走动。"我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪,怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子望回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的,过一会说,"我走了;到那边来信!"我望着他走出去。他走了几步,回过头看见我,说,"进去吧,里边没人。"等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。   近几年来,父亲和我都是东奔西走,家中光景是一日不如一日。他少年出外谋生,独力支持,做了许多大事。那知老境却如此颓唐!他触目伤怀,自然情不能自已。情郁于中,自然要发之于外;家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年的不见,他终于忘却我的不好,只是惦记着我,惦记着我的儿子。我北来后,他写了一信给我,信中说道,"我身体平安,惟膀子疼痛利害,举箸提笔,诸多不便,大约大去之期不远矣。"我读到此处,在晶莹的泪光中,又看见那肥胖的,青布棉袍,黑布马褂的背影。唉!我不知何时再能与他相见!</span>

js为:

<script>
$.fn.typing=function(n){//默认选项var options={speed:100,       //打字速度range:100,       //打字速度波动的范围repeat:true,     //是否重复flashback:true,  //是否倒序返回flicker:false     //是否闪烁
    }$.extend(options,n);var _this=$(this);var str=$(this).text().split('');//分割字符串var index=0;//当前索引var direction=1;//1为正向,-1为反方向//将分割后的字符串拼接装入数组并显示出来$(str).each(function(i,k){str[i]=(str[i-1]?str[i-1]:'')+str[i]; });//设置边框模拟光标_this.css({'border-right':'2px solid #000','padding-right':'3px'});//启动定时器,开启打字效果
    setTimeout(init,options.speed);//初始化函数function init(){_this.text(str[index]);//如果运行到最后,且开启了重复if(index>=(str.length-1)&&options.repeat){//如果设置了倒叙则变换方向if(options.flashback){direction=-1;//变换方向为负方向    }else{index=0;    //否则从头开始
            }//如果设置了闪烁则启用闪烁效果if(options.flicker){_this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);}setTimeout(init,2000);//如果运行到最后但未开启重复}else if(index>=(str.length-1) && !options.repeat){//如果设置了闪烁则启用闪烁效果if(options.flicker){_this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);}//移除光标样式_this.css('border-right','');//如果倒回开始            }else if(index<0){index=0;direction=1;//变换方向为正方向setTimeout(init,Math.random()*options.range+options.speed);}else{setTimeout(init,Math.random()*options.range+options.speed);}index+=direction;}
}
$('#text').typing({range : 200,repeat : true
});
</script>

运行:

https://jsfiddle.net/cacti/90vf6n23/

转载于:https://www.cnblogs.com/cacti/p/4597440.html

jQuery打字效果相关推荐

  1. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  2. python打字机效果_打字效果动画的4种实现方法(超简单)

    方法一(纯css实现): html代码: 打字动画打字动画打字动画 css样式: .typing{ font-size: 1rem; padding-top: 6%; margin-bottom: 5 ...

  3. Jquery--实现打字效果

    一.jquery实现打字效果 (1)代码 <head><meta charset="UTF-8"><title>打字效果</title&g ...

  4. php实现打字效果,CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 $(function(){ $(".element") ...

  5. html打字并自动滚动效果,js实现键盘自动打字效果

    content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale= ...

  6. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  7. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  8. js实现简单的循环打字效果(思路分享)

    1.初始化"打字创建"属性 代码类似于这样: <div id="demo"></div> <script>var typin ...

  9. 标题栏打字效果_JS特效源码

    最新标题栏打字效果_JS特效源码 以下是三零网为大家整理的最新标题栏打字效果_JS特效源码的文章,希望大家能够喜欢! <script language="JavaScript1.2&q ...

  10. 分享30个最佳 jQuery Lightbox 效果插件

    您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27 ...

最新文章

  1. SLAM算法&技术之Gauss-Newton非线性最小二乘算法
  2. 【连载】优秀程序员的 45 个习惯之习惯35
  3. 微信第一行代码曝光!从「扫地僧」到「地成佛」,张小龙10年磨一剑
  4. Web应用验证码方面总结(ASP.NET版)
  5. 推荐一款非常不错的子网计算器
  6. 水晶报表10 注册码
  7. OGC之路(1) 之 WMS标准学习总结
  8. [机器学习] XGB/LGB---自定义损失函数与评价函数
  9. Python、Perl 垫底,C语言才是最环保的编程语言
  10. 社交电商带直播电商功能,可以DIY前端,可以H5和小程序一般商城常用功能齐全
  11. 20165302 学习基础和C语言基础调查
  12. 【拯救赵明】UTM解决网络安全大问题
  13. matlab中的求导函数diff
  14. 化学到底是不是一个好专业?该不该转行?————试图以此文终结所有相关讨论...
  15. 华为平板可以安装python_平板电脑能否代替笔记本电脑?平板电脑购买指南
  16. 《JavaScript交互式网页设计》复习考试
  17. 什么使格瓦拉风行至今
  18. 计算机主机检测不到耳机,win10电脑检测不到耳机怎么办_win10电脑检测不到耳机如何解决-系统城...
  19. C3的新特性.你都知道了吗???
  20. 超级*** 04格式化左脑

热门文章

  1. DDos-Attack攻击器教程(kali linux)
  2. Notepad++ 替代品开源了,好用 !!!
  3. 解决 Elasticsearch 查询时 Fielddata is disabled on text fields by default 错误
  4. 中国电信无线网络服务器,电信免费升级500兆?体验过后发现事情并不简单
  5. android电量伪装原理,安卓电量伪装神器
  6. Android一键锁屏与抬手亮屏的实现
  7. win10远程计算机证书错误,设置win10系统ie证书错误的详细办法
  8. Tensorflow项目中--FLAGS=tf.flags.FLAGS
  9. OA项目之会议排座和送审
  10. 计算机仿真撤稿,LOL云顶之弈11.5天神裁决天使阵容攻略 新版本裁决天使运营思路...