JS 打字机效果
请点我,查看效果
试过对你不管不顾
我挂过你电话
也曾为你哭到沙哑
我曾经为你去学做过晚餐
曾觉得你的关心太烦
也曾为你起得很早
试过狠心把你甩掉
试过偷偷拍你的微笑
也曾经把你电话删掉
我给过你承诺
试过不承认犯的错
我幻想过如果和你过一辈子不错
捱过了四季才明白你就是我追随不落的日月
-- 爱你的我--
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 打字机效果的更多相关文章
- js打字机效果实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...
- 原生js实现简单打字机效果
快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- js sleep效果
js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- 关于Unity中NGUI的Tab商城、Scrollview和打字机效果的实现
Tab商城实例 UIToggle 和 UIToggledObjects+ Box Collider(实现商城功能必备) 1.创建两个个UI Sprite,Sprite1和Sprite2 2.给Spri ...
- js 动画效果实现
1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...
- 页面倒计时跳转页面效果,js倒计时效果
页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
随机推荐
- HDU 1502 Regular Words DP+高精度
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1502 题目大意:找出总的满足条件的字符串数,num(a)=num(b)=num(c)且任何前缀均满足n ...
- MySQL索引原理与慢查询优化
索引目的 索引的目的在于提高查询效率,可以类比字典,如果要查“mysql”这个单词,我们肯定需要定位到m字母,然后从下往下找到y字母,再找到剩下的sql.如果没有索引,那么你可能需要把所有单词看一遍才 ...
- c#语言基础编程-转义符
C#转义字符: 引言 为了在程序中能够控制字符的输出以及区分开双引号和单引号(双引号和单引号在程序中标示里面的内容为字符串和字符),所以用一种特殊的字符常量:是·以反斜线"\"开头 ...
- hdu2128之BFS
Tempter of the Bone II Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 98304/32768 K (Java/ ...
- windows 下删除.svn文件
Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] @= ...
- Instruction (hdu 5083)
Instruction Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- Linux进程学习(孤儿进程和守护进程)
孤儿进程和守护进程 通过前面的学习我们了解了如何通过fork()函数和vfork()函数来创建一个进程.现在 我们继续深入来学习两个特殊的进程:孤儿进程和守护进程 一.孤儿进程 1.什么是 孤儿进程如 ...
- 我开启httpd服务的时候 显示Could not reliably determine the server`s fully qualified domain name,
vi /etc/httpd/conf/httpd.conf加入一句 ServerName localhost:80
- Python获取Origin官网视频
程序说明:最近学习origin,看到官网有入门视频(http://www.originlab.com/index.aspx?go=SUPPORT/VideoTutorials),看着挺多的,就用pyt ...
- 阿里大于验证码发送 (ThinkPhp框架)
1.登录平台 阿里大于2.登陆之后我们可以看到资费,使用场景等,在进入正题之前我们需要一些准备工作,首先我们先了解下短信的请求参数,在这里我们需要注意的是sms_param这个参数,在接下来我们申请短 ...