软件学堂

网游分类软件分类

JS代码实现文字跳动特效

2012-10-20 来源:网络

【实例名称】

文字跳动特效

【实例描述】

本例的文字跳动特效主要是为了增添网页的特色,实现类似于用凸透镜浏览文字的效果。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> <script language="JavaScript"> function nextSize(i,incMethod,textLength)//获取随机字体大小的方法 {     if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );     if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14)))); } function sizeCycle(text,method,dis) {  output = "";  for (i = 0; i < text.length; i++)  {   size = parseInt(nextSize(i +dis,method,text.length));   //获取随机的字体大小   output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";  }  myDiv.innerHTML = output;                   //动态输出指定字体大小的文本 } function doWave(n) {    theText = "欢迎光临";                       //要浏览的文本  sizeCycle(theText,1,n);                     //实现跳动的方法   if (n > theText.length) {n=0}               //如果文本显示完毕,则从头再开始  setTimeout("doWave(" + (n+1) + ")", 50);   //不断调用该方法-实现循环作用 } </script> </head> <body bgcolor="#fef4d9" onload=doWave(0);> <div ID="myDiv" align="center"> </div></body> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点其实是动态改变文字的字体大小。本例通过“nextSize”方法获取随机的字体大小,然后设置文本中每个字的大小不同,通过“innerHTML”属性,将文本动态显示在div中,从而实现跳动的效果。

【源码下载】

本实例JS代码下载

上一篇:JS代码实现文字滑动效果
下一篇:利用PS滤镜及图片合成制作日食效果

相关文章