基于jQuery实现文字打印动态效果
程序员文章站
2024-01-23 18:51:34
本文实例为大家分享了jquery实现文字打印动态效果的具体代码,供大家参考,具体内容如下
主体html
本文实例为大家分享了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为奇数的时候最后一个字符显示为"_",当为偶数的时候显示" ",这样就能形成打印文字的那种动态效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 为瘫痪病人开发的机械外骨骼被批准上市
推荐阅读
-
基于jQuery实现文字打印动态效果
-
基于jquery的复制网页内容到WORD的实现代码_jquery
-
11个用于提高排版水平的基于jquery的文字效果插件_jquery
-
基于jQuery实现的水平和垂直居中的div窗口_jquery
-
jQuery基于ajax实现带动画效果无刷新柱状图投票代码_jquery
-
基于jQuery的输入框无值自动显示指定数据的实现代码_jquery
-
基于jQuery实现的水平和垂直居中的div窗口_jquery
-
基于Jquery实现的一个图片滚动切换_jquery
-
基于jQuery实现点击同时更改两个iframe的网址_jquery
-
jquery xMarquee实现文字水平无缝滚动效果_jquery