本文实例为大家分享了jQuery实现文字打印动态效果的具体代码,供大家参考,具体内容如下
<强>主体html
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>打印文字效果& lt;/title>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-3.2.1.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
& lt;脚本/比;
& lt; head>
& lt; body>
& lt; p id="输入"在世界上最遥远的距离。不是生与死之间。但是当我站在你的面前。然而,你不知道我爱you
& lt;/body>
之前
对于JQuery的引用,可以先到JQuery官网下载相应的版本,引用的时候加入相应的目录就可以了
接下来就是在脚本标签中添加代码实现文字的动态效果了,先上代码
& lt; script>
$ (dcument)时函数(){
输入();
}）
var文本;//p标签里对应的字符串
var指数=0;//文本字符串的下标
var id;//setTimeout()的返回值,用于关闭clearTimeout (id)
函数类型()
{
文本=$(" #输入")。text ();
$(" #输入")。text (" ");
$(" #输入"),告诉();
类型();
}
结果=" ";
函数类型(){
结果+=text.charAt(指数);
$(" #输入”)。文本(结果+(索引,1 & # 63;" _ ":" "));
如果(指数& lt;文本。长度- 1)
{
指数+ +;
id=setTimeout(“类型()",100);
}
其他的
clearTimeout (id);
}
& lt;/script>
之前
为什么显示文字的时候是结果+(指数,1 & # 63;“_”:“”)呢,当然是为了打印的动态效果了,当下标指数为奇数的时候最后一个字符显示为“_”,当为偶数的时候显示”“,这样就能形成打印文字的那种动态效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
