打字效果的文字特效用JavaScript怎么写啊?
发布网友
发布时间：2022-04-29 21:17
共3个回答
懂视网
时间：2022-05-15 11:54
有时你会希望给你的一段文字增加动效，让其中的每个字都动起来。你可以使用下面这段jQuery插件代码来达到这个效果。当然你需要结合一个CSS3 transition样式来达到更好的效果。
$.fn.animateText = function(delay, klass) {
var text = this.text(); var letters = text.split('');
return this.each(function(){ var $this = $(this);
$this.html(text.replace(/./g, '<span class="letter">$&</span>'));
$this.find('span.letter').each(function(i, el){
setTimeout(function(){ $(el).addClass(klass); }, delay * i);
});
});
};使用方法：
$('p').animateText(15, 'foo');相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
判断日期是否有效的JavaScript代码段
Node.js的Event Loop详解
JavaScript运行机制之为什么JavaScript是单线程
热心网友
时间：2022-05-15 09:02
var layers =document.layers,style=document.all,both=layers||style,idme=908601;
if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = <br/>'.style';}
function writeOnText(obj,str){
if(layers)with(document[obj]){ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str'); }
var dispStr=new Array("javascript源码大全");
var overMe=0;
function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){
var tmp0=tmp1= '',skip=100;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;idx++;}
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);
if (overMe==0 && plysnd==1){
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()){document.embeds<br/>[0].stop();<br/>setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2
+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);}}
function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 300, 0);}
</script>
<BODY onload=init()>
<DIV class=ttl1 id=ttl0></DIV>
</BODY>
热心网友
时间：2022-05-15 10:20
var str="javascript程序设计";
var b=[];
for(i=0;i<str.length;i++)
{
b[i]=str.charAt(i);
}
i=0;
function start()
{
d.innerHTML+=word_style(b[i]);
i++;
if(i>=b.length)
{
clearInterval(u);
}
}
function print_word()
{
u=setInterval("start()",500);
}
function word_style(co)
{
var color=['red','blue','yellow','green','pink','orange','black','white'];
var n=parseInt(Math.random()*color.length);
var size=parseInt(Math.random()*7+1);
var styl=parseInt(Math.random()*7+1);
co=co.fontcolor(color[n]);
co=co.fontsize(size);
if(styl==1)
co=co.italics();
if(styl==2)
co=co.bold();
if(styl==3)
co=co.sub();
if(styl==4)
co=co.big();
if(styl==5)
co=co.sup();
if(styl==6)
co=co.small();
if(styl==7)
co=co.strike();
return co;
}
</script>
<body onload=print_word()></body>
<div id=d style="position:absolute;width:300;height:30;"></div>
