jQuery打字特效插件typeit.js

来源:https://www.sucaihuo.com/js/2919.html 2017-09-04 23:59浏览(773) 收藏

一款jQuery打字特效插件typeit.js,页面的最上面有一个打字的demo效果,下面有可以设置不同参数后查看的打字效果,另外有几个页面插入特效的相关代码。
jQuery打字特效插件typeit.js
分类:文字特效 > 文字动画 难易:初级
查看演示 下载资源: 10 下载资源 下载积分: 20 积分

页面的head部分,需引入页面所需的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="dist/typeit.min.css">
<link type="text/css" rel="stylesheet" href="src/style.css">

页面的body部分,包含了多个演示效果,这里仅贴出部分代码:

<a name="top"></a>
<header>
<h1 class="main-header">TypeIt</h1>
<hr>
<span class="typeit-box"></span>
</header>
<div class="container">
<section>
  <form id="TIInput">
	<h2 class="ti-header">Try it!</h2>
	<span class="info">Tweak the settings (optional), enter at least one string, and watch it go!</span>
	<div class="options-holder">
	  <div class="ti-option-box">
		<label>Type Speed</labeL>
		<input class="ti-option" type="number" id="iTypeSpeed" placeholder="typeSpeed">
	  </div>
	  <div class="ti-option-box">
		<label>Life-Like</labeL>
		<select class="ti-option" id="iLifeLike">
		  <option value="true" selected>True</option>
		  <option value="false">False</option>
		</select>
	  </div>
	  <div class="ti-option-box">
		<label>Show Cursor</labeL>
		<select class="ti-option" id="iShowCursor">
		  <option value="true" selected>True</option>
		  <option value="false">False</option>
		</select>
	  </div>
	  <div class="ti-option-box">
		<label>Break Lines</labeL>
		<select class="ti-option" id="iBreakLines">
		  <option value="true" selected>True</option>
		  <option value="false">False</option>
		</select>
	  </div>
	  <div class="ti-option-box">
		<label>Break Wait</labeL>
		<input class="ti-option" type="number" id="iBreakWait" placeholder="breakWait">
	  </div>
	  <div class="ti-option-box">
		<label>Delay Start</labeL>
		<input class="ti-option" type="number" id="iDelayStart" placeholder="breakStart">
	  </div>
	  <a href="#options" class="settings-link">Wait, what do these settings actually do?</a>
	  <textarea rows="3" id="stringTI" placeholder="Enter one or multiple strings per line here."></textarea>
	</div>
	<input type="submit" id="TISubmit" value="Type it!">
  </form>
  <div class="ti-output-box">
	<div id="TIOutput">
	  <span class="temp-text">output box</span>
	</div>
  </div>
  <a id="scrollTo"></a>
</section>

页面的底部,需引入jQuery库和两个必要的JS文件,代码如下:

<script type="text/javascript" src="src/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="dist/typeit.min.js"></script>
<script type="text/javascript" src="src/scripts.min.js"></script>
标签: 文字动画打字
评论2
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 椅子
    03-20 08:30
    n***7
    字体特效好看,,,不错
  • 头像 沙发
    09-05 09:09
    f***杰
    好好看,感谢分享啊
1 2