www.baike369.com
百科369 > JS教程 > JavaScript文字跳动特效

JavaScript文字跳动特效


JavaScript文字跳动特效

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

本例的重点其实是动态改变文字的字体大小:

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

实例

下面制作一个文字跳动特效的例子。源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript文字跳动特效实例-www.baike369.com</title>
<script type="text/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(var 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)+")",1000);
}
-->
</script>
</head>
<body bgcolor="#fef4d9" onload="doWave(0);">
<div id="myDiv" align="center"></div>
</body>
</html>

显示效果如下:

JavaScript文字跳动特效实例

Copyright© 2011-2016 www.baike369.com All Rights Reserved