JavaScript实现正弦跳动文字
今天研究了下利用JavaScript做的一个正弦跳动文字的方法，发现效果还可以，先看看效果吧：
虽然是个小小的应用，但代码分析起来也不是很简单，下面是代码：
1）定义nextSize（）函数
function nextSize(i,incMethod,textLength) {
if(incMethod == 1) return (72*Math.abs(Math.sin(i/(textLength/3.14))));
if(incMethod == 2) return (72*Math.abs(Math.cos(i/(textLength/3.14))));
}
定义三个参数，其中incMethod=1时正弦取值，incMethod=2时余弦取值。
2）定义字符字体函数sizeCycle
function sizeCycle(text,method,dis){
output = “”;
for(i=0;i<text.length;i++) {
size = parseInt(nextSize(i +dis,method,text.length));
output += “<font color=green style= ‘font-size:”+size+”pt’>”
+text.substring(i,i+1)+”</font>”;
}
theDiv.innerHTML = output;
}
三个参数中，method是传递给函数nextSize（）中的incMethod。
3）让字符串运动的函数，doWave（）动起来！！
function doWave(n){
theText = “welcome to glwzu“;
sizeCycle(theText,1,n);
if(n > theText.length) {n=0;}
setTimeout(“doWave(” + (n+1) + “)”,50);
}
把这三个函数加在<script type=”text/JavaScript” language=”JavaScript“></script>之 间。
4）：添加body代码
<body onload=doWave(0)>
<div id=”theDiv” align=”center”></div></body>
执行函数doWave（0）。
至此整个页面就ok了，用简单的HTML就能实现，你也来试试吧！
您可能会喜欢:
Filed under 原创javascript, 网站相关. Tags: JavaScript
呵呵，咋没有看到效果的呢？firefox win7
[回复]
@fly3q
我也发现这问题。我XP+ 360、IE8可以看到效果，但firefox同样看不到。
:
[回复]
@fly3q
JavaScript与firefox兼容性有问题
[回复]
评论栏滴小猪表情挺可爱滴说
[回复]
@奶牛
[回复]
@fly3q
OK了，问题解决，现在在firefox下可以看到效果啦
[回复]
Its about time someone said this. Thanks for sharing your thoughts with the world, this is imoportant stuff to some of us.
[回复]
It is in fact fine to bump into such a provoking thought as this. The varied parts you bring up here are definitely intriguing. Despite the fact that I do not think a great deal of visitors consider what your declaring, the post is still pleasing.
[回复]
It’s positively swell to run across such a fascinating subject as this one. The assorted points you bring up here are honestly captivating. Although I do not believe a lot of visitors accept as true with what your expressing, the website is still inspiring.
[回复]
It’s remarkable to bump into such a interesting discussion as this. The many parts you specify here are definitely appealing. Although I do not think a great deal of people trust what your claiming, the website is still captivating.
[回复]
I concur with what you are expressing here on your blog. Admittingly, some of this story may be bona fide, I without question have problems with it.
[回复]
I concur with things you are saying here on your site. Admittingly, some of this news may be typical, I surely feel a problem with it.
[回复]