利用jQuery实现打字机字幕效果实例代码


Posted in Javascript onSeptember 02, 2016

实现效果:

利用jQuery实现打字机字幕效果实例代码

利用jQuery实现打字机字幕效果实例代码

实现原理:

把html里的代码读进来,

然后跳过“<”和“>”之间的代码,

顺便保存了内容的格式,

然后一个定时器,逐个输出。

用到的基础知识:

jQuery为开发插件提拱了两个方法,分别是:

     jQuery.fn.extend(object);

    jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 

如扩展$.fn.abc() 

那么你可以这样子:$("#div").abc();

$.fx是指jquery的特效。 

如使用显示、滑动、淡入淡出、动画等。 

$.fx.off可以关闭动画,其实是直接显示结果。

实现代码:

<!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>

拓展

再简单介绍下jQuery的$.extend

$.extend

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。

如下:在jQuery命名空间上增加两个函数。

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://file2.ci123.com/ast/js/jquery_172.js"></script>
<script>
	
	jQuery.extend({
		min:function(a, b){return a < b ? a : b;},
		max:function(a, b){return a < b ? a : b}
	});
	
	alert("min" + "——" + jQuery.min(1, 2));
	alert("max" + "——" + jQuery.max(6, 8));
</script>
</body>
</html>

总结

大家可以自己操作看下效果,这样更容易理解学习,以上就是这篇文章的全部内容,希望对大家的学习和工作能有所帮助,如果有疑问可以留言交流。

Javascript 相关文章推荐
jquery实现图片左右切换的方法
May 07 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 #Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 #Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 #Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 #Javascript
AngularJs  Understanding Angular Templates
Sep 02 #Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 #Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 #Javascript
You might like
用PHP实现验证码功能
2006/10/09 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
Anaconda入门使用总结
2018/04/05 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
python__name__原理及用法详解
2019/11/02 Python
wxPython实现绘图小例子
2019/11/19 Python
Python while循环使用else语句代码实例
2020/02/07 Python
用python发送微信消息
2020/12/21 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
一夜的工作教学反思
2014/02/08 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
保护环境建议书100字
2014/05/13 职场文书
服务承诺书格式
2014/05/21 职场文书
运动会入场口号
2014/06/07 职场文书
排查整治工作方案
2014/06/09 职场文书
写给医生的感谢信
2015/01/22 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android