基于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 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
原生js实现选项卡功能
Mar 08 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 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根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
Python实现的下载网页源码功能示例
2017/06/13 Python
python Flask实现restful api service
2017/12/04 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
《在家里》教后反思
2014/03/01 职场文书
国际贸易专业求职信
2014/06/04 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
开除通知书范本
2015/04/25 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
python实战之90行代码写个猜数字游戏
2021/04/22 Python
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers