js实现键盘自动打字效果
更新时间：2016年12月23日 14:31:13 作者：Peak-Leo
本文主要介绍了基于jQuery实现的简单版键盘自动打字效果，具有很好的参考价值，下面就跟着小编一起来看下吧
最近在网上看到一个字符逐个出现的打字效果，觉得挺有趣的，想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符，于是就基于jQuery写了一个简单版的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AutoType</title>
</head>
<body>
<div id="autotype"></div>
<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$.fn.autotype = function (str, speed) {
var self = this,
defaultStr = '<p>我希望有个如你一般的人.</p><br>'
+'<p>如山间清爽的风.</p><br>'
+'<p>如古城温暖的光.</p><br>'
+'<p>从清晨到夜晚.</p><br>'
+'<p>由山野到书房.</p><br>'
+'<p>只要最后是你，就好.</p><br>',//将要添加的元素的默认内容
defaultSpeed = 100,
str = str || defaultStr,
speed = speed || defaultSpeed,
index = 0,
timer = setInterval(function () {
var current = str.substr(index, 1);
if (current == '<') {
index = str.indexOf('>', index) + 1;
} else {
index++;
}
self.html(str.substring(0, index) + ( (index & 1) && (index != str.length) ? '_' : ''));
if (index >= str.length) {
clearInterval(timer);
}
}, speed);
};
$("#autotype").autotype();
</script>
</body>
</html>
本人才疏学浅，总觉得自己写的方法比较简陋，于是搜索了一波资料，发现有个不错的jQuery插件Typed.js。
Type.js的基础使用
<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0
});
});
</script>
...
<span class="element"></span>
插件为用户定制了许多默认设置与效果
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
stringsElement: null,
// typing speed
typeSpeed: 0,
// time before typing starts
startDelay: 0,
// backspacing speed
backSpeed: 0,
// shuffle the strings
shuffle: false,
// time before backspacing
backDelay: 500,
// loop
loop: false,
// false = infinite
loopCount: false,
// show cursor
showCursor: true,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function() {},
// starting callback function before each string
preStringTyped: function() {},
//callback for every typed string
onStringTyped: function() {},
// callback for reset
resetCallback: function() {}
});
});
</script>
具体用法可以看看GitHub地址，带注释的源码400多行，不算复杂。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于codemirror6实现自定义代码提示效果的相关资料,CodeMirror是一个网络代码编辑器组件,它可以在网站中用于实现支持多种编辑功能的文本输入字段,并具有丰富的编程接口以允许进一步扩展,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了js实现纯前端压缩图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要给大家介绍了关于如何通过一分钟学会JavaScript中try-catch的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
我们不管js或iframe怎么调用的，模拟点击就意味着打开广告链接，广告商就以为用户点击了他的广告，所以我们只要保证点击了一个链接但没有跳出页面的结果就行了，是吗？2010-01-01
echarts图表设置宽度100%结果为100px的解决办法
在开发一个前端项目时需要用到Element-ui的el-tabs组件和Echart开源库,当两者嵌套使用时,我给Echart中的图表宽度设置为了100%,但是实际的宽度却只有100px,这篇文章主要给大家介绍了关于echarts图表设置宽度100%结果为100px的解决办法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了微信小程序开发打开另一个小程序的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
今天小编就为大家分享一篇layui实现数据表格隐藏列的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
基于JS实现将JSON数据转换为TypeScript类型声明的工具
在TypeScript 项目中，我们经常需要使用声明一系列的ts类型。然而，手动写的效率实在太低，本文就实现一个工具将 JSON 数据转换为 TypeScript 类型定义，需要的可以参考一下2023-04-04
JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者，掌握JavaScript可以增强用户的使用体验，提供交互及富客户端等功能。2010-04-04
javascript跟随滚动条滚动的层(浮动AD效果)...2007-08-08
最新评论