当前位置：首页 > 网页特效 > 其他

轻量级响应式jQuery打字机特效插件

分类：其他日期：2024-05-14 点击(0) 评论(0)

轻量级响应式jQuery打字机特效插件

简介

使用该打字机特效需要引入jQuery、typeit.js和typeit.css文件。

```html
<link rel="stylesheet" type="text/css" href="typeit.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="typeit.js"></script>     
```           
#####  HTML结构
该jQuery打字机特效的HTML结构如下：

```html
<span class="type-it"></span>          
```    
#####  初始化插件
你可以通过2种方式来初始化该打字机插件，第一种方式是通过在HTML标签上通过data-*属性来设置参数，然后通过typeIt()方法来初始化。

```html
<span class="type-it"
  data-typeit-whattotype="A new string to type."
  data-typeit-speed="100"
  data-typeit-lifelike="true"
  data-typeit-showcursor="true">
 
</span>               
$('.type-it').typeIt();    
```             
第二种方式是在初始化插件的时候传入配置参数。

```html
$('.type-it').typeIt({
  whatToType:'Enter your string here!',
  typeSpeed: 300,
  lifeLike: false,
  showCursor: true
});  
```              
该打字机插件支持输入多个句子的文本。默认情况下每一个句子占一行，自上往下显示。要使用多行句子，只需要传入一个数组即可。

```html
$('.type-it').typeIt({
  whatToType:['Enter your string here!', 'Another string!']
});
```
你也可以设置新的居中覆盖旧的句子的打字效果，只需要将breakLines参数设置为false即可。

```html
$('.type-it').typeIt({
  whatToType: ['Enter your string here!', 'Another string!'],
  breakLines: false
});
```
#####  配置参数
该打字机特效有以下一些可用的配置参数。

|  参数 | 默认值  |  描述 |
| ------------ | ------------ | ------------ |
|whatToType|'This is the default string. Please replace this string with your own.'|默认打印的文本|
|typeSpeed|200|打印的速度|
|lifeLike|true|设置不规则的打字速度，模拟真人打字效果|
|showCursor|true|显示闪烁的光标效果|
|breakLines|true|多行文本时的打印效果，设置为true时为句子从上往下打印，设置为false时为新句子覆盖旧句子|
|breakWait|500|打印多个句子时，句子之间的间隔时间|
|delayStart|250|插件初始化之后到开始打印之间的时间|
#####  回调函数
在完成文字打印之后可以设置回调函数来完成其它工作。

```html
$('.typeit-box').typeIt({
  whatToType: 'Here is a string!',
}, function() {
  console.log('This is your callback function!');
}); 
```

web299.com

轻量级响应式jQuery打字机特效插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果