利用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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python计算最小优先级队列代码分享
2013/12/18 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python正则表达式使用范例分享
2016/12/04 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
印度网上药店:1mg
2017/10/13 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
土地租赁意向书
2014/07/30 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年远程教育工作总结
2014/12/09 职场文书