基于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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
javascript 中的事件委托详解
2016/10/25 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python实现类的静态变量用法实例
2015/05/08 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python图像处理入门(一)
2019/04/04 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python 项目目录结构设置
2020/02/14 Python
男方父母证婚词
2014/01/12 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
设计师求职信
2014/07/01 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
组织生活会发言材料
2014/12/15 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
小学庆六一主持词
2015/06/30 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python