JavaScript文字飞入效果

一个简短的JavaScript特效。

1 var flyword = function (elem, txt, time){
2 var _elem = document.getElementById(elem),
3 _timer = null ,
4 _index = 0 ,
5 _array = [];
6 for ( var i = 0 ,len = txt.length;i & lt;len;i ++ ){
7 var span = document.createElement( " span " );
8 span.innerHTML = txt[i];
9 _elem.appendChild(span);
10 _array.push(span);
11 };
12 _timer = setInterval(animate,time || 40 );
13 function animate(){
14 var len = _array.length,ind = _index ++ ,st = 1 ;
15 for ( var i = 0 ;i & lt;len;i ++ ){
16 var span = _array[i],e = Math.max( 0 ,Math.min( 1 ,(ind - 1 ) / 10));
17   if (span.tear){ continue ;}
18 st = 0 ;
19 span.style.color = [ " rgb( " ,[parseInt( 255 - 0 * e),parseInt( 255 - 64 * e),parseInt( 255 - 192 * e)], " ) " ].join( "" );
20 if (e == 1 ){
21 span.style.marginLeft = " auto " ;
22 } else if (e & gt; 0 ){
23 span.style.marginLeft = [ 0.7 * ( 1 - e), " em " ].join( "" );
24 }
25 if (st){ clearInterval(_timer); }
26 _elem.style.visibility = " visible " ;
27 }
28 }
29 };

调用方法：

flyword("d1","POP方法，移除数组最后一个元素并返回该元素",10);

flyword("d2","PUSH方法，在数组最后为数组对象附加元素，返回最新的数组长度");

转载于:https://www.cnblogs.com/chanruida/archive/2011/04/26/2029623.html