利用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 相关文章推荐
Node.js实现简单聊天服务器
Jun 20 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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脚本[带参数]的方法
2010/01/22 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python itertools模块详解
2015/05/09 Python
Python Matplotlib库入门指南
2015/05/18 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python 处理文件的几种方式
2019/08/23 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
护士的岗位职责
2013/12/04 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers