基于jQuery实现的打字机效果


Posted in Javascript onJanuary 16, 2017

 话不多说,请看实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="keyword" content="">
<meta name="description" content="">
</head>
<body>
<div class="autotype" id="autotype">
 <p>一场雨把我困在这里</p>
 <br/>
 <p>你温柔的表情</p>
 <p>会让我伤心</p>
 <br/>
 <p>六月的雨,只是无情的你~</p>
</div>
<script src="http://file2.ci123.com/ast/js/jquery_172.js"></script>
<script>
 $.fn.autotype = function(){
  var $text = $(this);
  console.log('this',this);
  var str = $text.html();//返回被选 元素的内容
  var index = 0;
  var x = $text.html('');
  //$text.html()和$(this).html('')有区别
  var timer = setInterval(function(){
   //substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符
   var current = str.substr(index, 1);
   if(current == '<'){
   //indexOf() 方法返回">"在字符串中首次出现的位置。
    index = str.indexOf('>', index) + 1;
   }else{
    index ++ ;
   }
   //console.log(["0到index下标下的字符",str.substring(0, index)],["符号",index & 1 ? '_': '']);
   //substring() 方法用于提取字符串中介于两个指定下标之间的字符
   $text.html(str.substring(0, index) + (index & 1 ? '_': ''));
   if(index >= str.length){
    clearInterval(timer);
   }
  },100);
 };
 $("#autotype").autotype();
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 #Javascript
JavaScript严格模式详解
Jan 16 #Javascript
关于iframe跨域POST提交的方法示例
Jan 15 #Javascript
JavaScript中利用for循环遍历数组
Jan 15 #Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 #Javascript
JavaScript调试的多个必备小Tips
Jan 15 #Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 #Javascript
You might like
PHP 魔术函数使用说明
2010/05/14 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php中filter_input函数用法分析
2014/11/15 PHP
WAF的正确bypass
2017/01/05 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
募捐倡议书怎么写
2014/05/14 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
授权委托书
2014/07/31 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL