利用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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
微信小程序模拟cookie的实现
Jun 20 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+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP关联链接常用代码
2012/11/05 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
js实现可拖动DIV的方法
2013/12/17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
js 数组详细操作方法及解析合集
2018/06/01 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
python计算导数并绘图的实例
2020/02/29 Python
python读取mysql数据绘制条形图
2020/03/25 Python
在python中使用nohup命令说明
2020/04/16 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
你常见到的runtime exception
2016/09/05 面试题
Android面试题附答案
2014/12/08 面试题
教育孩子心得体会
2014/01/01 职场文书
好邻里事迹材料
2014/01/16 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android