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倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
随机推荐
- jQuery 数据 DOM 元素 核心 属性
jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...
- Eclipse svn图标不显示
在菜单栏中:windows ->preferences->General->Appearance->Lable Decorations 勾选其中的 SVN 项,最后应用确认之后 ...
- Java虚拟机基础知识
写在前面 之前老大让做一些外包面试,我的问题很简单: 介绍一下工作中解决过比较有意思的问题. HashMap使用中需要注意的点. 第一个问题主要是想了解一下对方项目经验的含金量,第二个问题则是测试下是 ...
- python处理xml的常用包(lib.xml、ElementTree、lxml)
python处理xml的三种常见机制 dom(随机访问机制) sax(Simple APIs for XML,事件驱动机制) etree python处理xml的三种包 标准库中的xml Fredri ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- ASP.NET常用导出Excel方法汇总
本文转载:http://mattberseth.com/blog/2007/04/export_gridview_to_excel_1.html http://geekswithblogs.net/a ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们 ...
- nanosleep纳秒级延迟
//函数原型 int nanosleep(struct timespec *req, struct timespec *rem) //参数列表: // req:要求的睡眠时间 // rem:剩余的睡眠 ...
- [Reactive Programming] Async requests and responses in RxJS
We will learn how to perform network requests to a backend using RxJS Observables. A example of basi ...
- MySQL 错误日志(Error Log)
同大多数关系型数据库一样,日志文件是MySQL数据库的重要组成部分.MySQL有几种不同的日志文件.通常包括错误日志文件,二进制日志,通用日志,慢查询日志,等等. 这些日志能够帮助我们定位mysqld ...