1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html字体打印效果 基于jQuery实现文字打印动态效果

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

时间:2022-08-29 12:35:41

相关推荐

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

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

主体html

打印文字效果

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

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

接下来就是在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

{

index++;

id = setTimeout("typed()", 100);

}

else

clearTimeout(id);

}

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。