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倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
随机推荐
- 阻止iOS设备锁屏
[[UIApplicationsharedApplication] setIdleTimerDisabled: YES];
- 《Numerical Methods》-chaper4-一元非线性方程的解
在许多生产时间问题中,我们根据已知条件往往会列出一个一元非线性方程,一个最典型的例子就是银行存款的问题,由于其利息需要基于前一年的本息和,因此列出来的方程x的指数往往是高次的.还有物理问题当中一系列用 ...
- microsoft visual studio 不能逐句执行?
最近在使用vs2013过程中,vs2013不能逐行执行,在不设断点的情况下,根本停不下来按一下F11,整个程序就执行完了.百度了很久也没找到方法(看的还不够仔细),卸载安装了很多次(看我够笨的吧),最 ...
- winform 解决界面闪动、提升加载速度 分类: WinForm 2015-02-03 16:34 161人阅读 评论(0) 收藏
说明: 从一个技术交流群里获得,经验证效果不错. //作用 加快界面加载 protected override CreateParams CreateParams { ...
- UITableView类用法大全:UITableView属性
[storyboard创建tableView步骤] 1.设置根视图 2.选中视图,设置导航栏editor/embed in/navigationcontroller 3.cell设置Identifie ...
- 写一个函数,参数为$n,生成一个数组,其元素为1~$n,各元素位置随机排列,不得重复
function rand_array($n){ $array=range(1,$n); shuffle($array); return $array; }
- mysql --batch --skip-column-name --execute 使用
mysql -h 127.0.0.1 -P 3306 -u root -p -D test --batch --skip-column-name --execute="select * fr ...
- centos6.5 安装
导系统,进入rescue模式,在提示符下输入grub,进入grub提示符.(不管用什么方法,能进入grub就行)root(hd?,?) //前一个问号是你第几块硬盘,后一个是LINUX所在的第几个分区 ...
- Android(java)学习笔记197:常用的对话框
一.常见对话框属性: 1. AlertDialog.Builder属性 • setTitle: 为对话框设置标题 :• setIcon : 为对话框设置图标:• setMessage: 为对话框设置 ...
- Objective-C:KVC
1 概述 1.1 访问方法 Key-value coding(KVC)是一种间接访问对象属性的机制,类似键值对,通过名字(或键)可以直接获得对象的属性值.事实上,key-value coding定义了 ...