请点我,查看效果

我送过你礼物
试过对你不管不顾
我挂过你电话
也曾为你哭到沙哑
我曾经为你去学做过晚餐
曾觉得你的关心太烦
也曾为你起得很早
试过狠心把你甩掉
试过偷偷拍你的微笑
也曾经把你电话删掉
我给过你承诺
试过不承认犯的错
我幻想过如果和你过一辈子不错
捱过了四季才明白你就是我追随不落的日月
-- 爱你的我--

HTML DOM

<div id="code">
<font color="#FF0000">
<span>我送过你礼物 </span><br>
<span>试过对你不管不顾 </span><br>
<span>我挂过你电话 </span><br>
<span>也曾为你哭到沙哑 </span><br>
<span>我曾经为你去学做过晚餐 </span><br>
<span>曾觉得你的关心太烦 </span><br>
<span>也曾为你起得很早 </span><br>
<span>试过狠心把你甩掉 </span><br>
<span>试过偷偷拍你的微笑 </span><br>
<span> 也曾经把你电话删掉 </span><br>
<span>我给过你承诺 </span><br>
<span>试过不承认犯的错 </span><br>
<span>我幻想过如果和你过一辈子不错</span><br>
<span>捱过了四季才明白你就是我追随不落的日月</span><br>
<span>-- 爱你的我--</span>
</font>
</div>

JS

(function($){
$.fn.typewriter = function(){
$(this).each(function(){
var timer,
$ele = $(this), str = $ele.html( ), progress = 0;
$ele.html('');
timer = setInterval(function(){
if( str.substr(progress, 1)=='<' ){
progress = str.indexOf('>', progress)+1
}else{
progress++;
}
$ele.html(str.substring(0, progress)+(progress & 1?'_':''))
if(progress >= str.length){
clearInterval(timer);
}
},75);
});
return $(this)
}
})(jQuery);
$('#code').typewriter();

JS 打字机效果的更多相关文章

  1. js打字机效果实现

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...

  2. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  3. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  4. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  5. js sleep效果

    js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...

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

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

  7. 关于Unity中NGUI的Tab商城、Scrollview和打字机效果的实现

    Tab商城实例 UIToggle 和 UIToggledObjects+ Box Collider(实现商城功能必备) 1.创建两个个UI Sprite,Sprite1和Sprite2 2.给Spri ...

  8. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

  9. 页面倒计时跳转页面效果,js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

随机推荐

  1. JavaScript高级程序设计5.pdf

    队列方法访问规则是FIFO(First-In-First-Out,先进先出),数组方法shift()能够移除数组中第一个项并返回该项,同时将数组长度减1,结合使用shift()和push(),可以像队 ...

  2. Eclipse svn图标不显示

    在菜单栏中:windows ->preferences->General->Appearance->Lable Decorations 勾选其中的 SVN 项,最后应用确认之后 ...

  3. spark-streaming-kafka包源码分析

    转载请注明原创地址 http://www.cnblogs.com/dongxiao-yang/p/5443789.html 最近由于使用sparkstreaming的同学需要对接到部门内部的的kafk ...

  4. thymeleaf 和其它标签组合 获取数据

    thymeleaf 有很多的内置标签, 但是我们在开发中会引入其它很多标签, 这个时候, 后台数据过来了,前端 页面要怎么显示呢? 网上资料真的很少. 不过还是找到了答案:  th:attr 这个标签 ...

  5. C#邮件接收系统核心代码(接收POP3邮件IMAP邮件)

    /* * Created by SharpDevelop. * User: Administrator * Date: 2013/11/18 * Time: 20:55 * * To change t ...

  6. LNMP一键安装包 V1.1 通告

    LNMP一键安装包 是一个用Linux Shell编写的能够为CentOS/RadHat.Debian/Ubuntu VPS(VDS)或独立主机安装LNMP(Nginx.MySQL/MariaDB.P ...

  7. MySQL 一致性读 深入研究 digdeep博客学习

    http://www.cnblogs.com/digdeep/p/4947694.html 一致性读,又称为快照读.使用的是MVCC机制读取undo中的已经提交的数据.所以它的读取是非阻塞的. 相关文 ...

  8. JAAS authentication in Tomcat example--reference

    In this tutorial you will learn how to configure JAAS authentication in Tomcat using the HTTP Basic ...

  9. Python之路【第十四篇】:AngularJS --暂无内容-待更新

    Python之路[第十四篇]:AngularJS --暂无内容-待更新

  10. hadoop集群环境搭建之zookeeper集群的安装部署

    关于hadoop集群搭建有一些准备工作要做,具体请参照hadoop集群环境搭建准备工作 (我成功的按照这个步骤部署成功了,经实际验证,该方法可行) 一.安装zookeeper 1 将zookeeper ...