基于jQuery实现文字打印动态效果

时间：2021-05-25

本文实例为大家分享了jQuery实现文字打印动态效果的具体代码，供大家参考，具体内容如下

主体html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>打印文字效果</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> <script/><head><body> <p id="typing">The furthest distance in the world.Is not between life and death.But when I stand in front of you.Yet you don't know that I love you</p></body>

对于JQuery的引用,可以先到JQuery官网下载相应的版本,引用的时候加入相应的目录就可以了

接下来就是在script标签中添加代码实现文字的动态效果了,先上代码

<script> $(dcument).ready(function(){ typing(); }) var text;//p标签里对应的字符串 var index = 0;//text字符串的下标 var id;//setTimeout()的返回值,用于关闭clearTimeout(id) function typing() { text = $("#typing").text(); $("#typing").text(""); $("#typing").show(); typed(); } result = ""; function typed(){ result += text.charAt(index); $("#typing").text(result + (index & 1 ? "_" : " ")); if(index <　text.length - 1) { index++; id = setTimeout("typed()", 100); } else clearTimeout(id); }</script>

为什么显示文字的时候是result+ (index & 1 ? "_" : " ")呢,当然是为了打印的动态效果了,当下标index为奇数的时候最后一个字符显示为"_",当为偶数的时候显示" ",这样就能形成打印文字的那种动态效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章