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 $( ...
随机推荐
- 谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH PKG_CONFIG_PATH
谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH PKG_CONFIG_PATH 转载自:http://blog.chinaunix.net/xmlrpc.ph ...
- App_global.asax.pdb: 另一个程序正在使用此文件,进程无法访问。
页面修改后,浏览报错,信息如下. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS0042: 创建调试信息文件“ ...
- 如何安装mysql服务
我刚开始安装mysql的时候,在windows的服务里面可以看到,但是装了以后有一段时间没有用它了,我在准备从windows的服务里面启动mysql服务的时候,发现没有mysql的服务了,那我的解决办 ...
- ios - block数据的回调
block在代理,kvo中传递数据效率最高 实现原理 控制器B想传递数据给控制器A.通过在B控制器中创建Block类型的类,创建方法,方法参数是刚才创建的block类型的变量.在方法实现的内部调用参数 ...
- Linux的硬链接为何不能链接目录
Linux中的目录文件是特殊的文件,其中的数据是一个关联列表的,像c++中的map,或者Python中的dict,保存每个文件名(包括子目录,Linux中一切皆文件!)到iNode的映射.iNode本 ...
- 微信sdk分享,苹果手机分享到qq好友和qq空间没有反应
最近线上程序苹果手机进行微信分享时,分享到qq好友和qq空间,无法调用分享程序,从微信跳转到qq后就没有反应了,但是安卓手机分享就没事? 解决:调用微信sdk分享时,分享的url(link)的参数不能 ...
- Cannot use object of type yii\db\Connection as array
$pointLog = $conn->createCommand('select * from table1 where is_deleted = 0 AND id1 = :id1 AND id ...
- 数据库连接driverClass和jdbcUrl大全
一.MySQL: driverClass:com.mysql.jdbc.Driver org.gjt.mm.mysql.Driver jdbcUrl:j ...
- 谈谈JDK线程的伪唤醒
在JDK的官方的wait()方法的注释中明确表示线程可能被"虚假唤醒",JDK也明确推荐使用while来判断状态信息.那么这种情况的发生的可能性有多大呢? 使用生产者消费者模型来说 ...
- python 笔记
第一周2016/9/11 Python 2.0和3.0的区别 3.0 的模块名改了和之前的2.0 不一样 #!/usr/bin/env python # -*- coding:utf-8 -*- ...