jquery打字机效果
html代码
<div id="box">
<div id="content">
<div id="code">
如果你认识以前的我,那么你会原谅现在的我。
</div>
</div>
</div>
css代码
body{margin:;padding:;background:#ffe;font-size:12px;overflow:auto}
#mainDiv{width:500px;height:100%;margin: 0 auto;margin-top: 100px;}
#code{float:left;width:440px;height:400px;color:#333;font-size:12px;margin:200px 0 0 200px;}
js代码
<script type="text/javascript">
(function($) {
$.fn.typewriter = function() {
this.each(function() {
var $ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
var timer = setInterval(function() {
var current = str.substr(progress, 1);
if (current == '<') {
progress = str.indexOf('>', progress) + 1;
} else {
progress++;
}
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
//if (progress >= str.length) {
//clearInterval(timer);
//}
}, 100);
});
return this;
};
})(jQuery);
$(function(){
$("#code").typewriter();
})
</script>
jquery打字机效果的更多相关文章
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- js打字机效果实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...
- 原生js实现简单打字机效果
快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- jquery动画效果---animate()--滚屏
jquery动画效果---animate()方法---W3school
- jquery 之效果
// jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
随机推荐
- RDIFramework.NET平台代码生成器V2.8发布-更新于2014-12-31(提供下载)
RDIFramework.NET平台代码生成器V2.8发布 更新于2014-12-31 注:已经发布了新版本,请转新版本下载: RDIFramework.NET平台代码生成器V3.0版本全新发布-更 ...
- XML转java对象
使用XStream来转换. XStream xStream = new XStream(); xStream.autodetectAnnotations(true); // xStream.alia ...
- sprint3终极演示
目标功能: 已实现功能: 首页.订单.资料界面 首页.订单.资料按钮 化妆师.化妆品.化妆视频按钮 化妆师.化妆品的详细分类 化妆师.化妆品的详细信息显示 化妆师的预约按钮和联系按钮 化妆品的购买按钮 ...
- 匈牙利命名法、骆驼命名法、帕斯卡(pascal)命名法
(2008-05-24 13:37:55) 转载▼ 标签: 杂谈 分类: 编程杂文 一.匈牙利命名法: 广泛应用于象Microsoft Windows这样的环境中. Windows 编 ...
- delphi TIdHTTP Post乱码问题
这里主要说的是中文乱码的问题 1. 发过去的是乱码如下处理, 服务器采用的是UFT-8编码的情况下 uses HTTPApp; sPost := HTTPEncode(UTF8Encode ...
- POJ - 2183 Bovine Math Geniuses
“模拟“题,运用哈希,不断地按照一定运算规律对一个结果进行计算,如果重复出现就停止并且输出该数.注意到仔细看题,这种题一定要细心! POJ - 2183 Bovine Math Geniuses Ti ...
- Windows Azure Table storage 之 动态Table类 DynamicTableEntity
在一般情况下,当我们在.net中使用Azure table storage的时候都会为该表建立一个TableEntity的派生类,如下所示. public class CustomerEntity : ...
- MySQL functions, IF, CASE
MySQLTutorial官网 IF function syntax: IF(expr,if_true_expr,if_false_expr) CASE expression syntax: CASE ...
- LeetCode----202. Happy Number(Java)
package isHappy202; /* * Write an algorithm to determine if a number is "happy". A happy n ...
- mybatis动态SQL标签的用法
动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的空格 ...