文字特效處理

1、波浪字

var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("http://foowin.com")
}
}

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

<h2><div id="jumpx" style="color:33ff33"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script>
==================

2、字符順序顯示變化

<SCRIPT LANGUAGE="ja;vascript">
neonBaseColor = "White";
neonColor = "00ff00";
num = 0;
num2 = 0;
num3 = 0;
num4 = neonColor;
function startNeon() {
message = neon.innerText;
neon.innerText = "";
for(i = 0; i != message.length; i++) {
neon.innerHTML += "<span id=\"neond\" style=\"color:"+neonBaseColor+"\">"+message.charAt(i)+"<\/span>"};
neon2();
}
function neon2() {
if(num != message.length) {
document.all.neond[num].style.color = neonColor;
num++;
setTimeout("neon2()", 100);
}
else {
num = 0;
num2 = message.length;
setTimeout("neon4onev()", 2000);
   }
}
function neon4onev() {
document.all.neond[num].style.color = neonBaseColor;
document.all.neond[num2-1].style.color = neonBaseColor;
if(Math.floor(message.length / 2) + 1 != num2) {
num++;
num2--;
setTimeout("neon4onev()", 50);
}
else {
setTimeout("neon5()", 50);
   }
}
function neon5() {
if(num3 != message.length && num3 != message.length+1) {
document.all.neond[num3].style.color = neonColor;
num3 = num3 + 2;
setTimeout("neon5()",100);
}
else {
setTimeout("neon52()", 50);
   }
}
function neon52() {
if(num3 == message.length) {
num3++;
neon52a();
}
else {
num3--;
neon52a();
   }
}
function neon52a() {
if(num3 != 1) {
num3 = num3 - 2;
document.all.neond[num3].style.color = neonColor;
setTimeout("neon52a()", 100);
}
else {
if(num4 == neonColor) {
num3 = 0;
neonColor = neonBaseColor;
setTimeout("neon5()", 2000);
}
else {
neonColor = num4;
num3 = 0;
setTimeout("neon4onev2()", 50);
      }
   }
}
function neon4onev2() {
document.all.neond[num].style.color = neonColor;
document.all.neond[num2 - 1].style.color = neonColor;
if(message.length != num2) {
num--;
num2++;
setTimeout("neon4onev2()", 50);
}
else {
num = 0;
num2 = 0;
setTimeout("neon3()", 2000);
   }
}
function neon3() {
if(num != message.length) {
document.all.neond[num].style.color = neonBaseColor;
num++;
setTimeout("neon3()", 100);
}
else {
num = 0;
neon2();
   }
}
</script>

<span id="neon">www.foowin.com</span>
==============================================

3、總在右上角旋轉顯示的字符

msg=msg.split('');
n=msg.length;
e=360/n;
yp=0;
xp=0;
yb=40;
xb=60;
sa=0.07;
sb=0;
pa=new Array();
pb=new Array();
for (i=0; i < n; i++){
document.write('<div id="logo" style="position:absolute;top:0;left:0;'
+'height:30;width:30;font-family:'+msgFont+';text-align:center;color:'+msgColor+'">'+msg[i]+'</div>');
}
function ani(){
yp=document.body.scrollTop+50;
xp=document.body.scrollLeft+window.document.body.clientWidth-100;
for (i=0; i < n; i++){
logo[i].style.top =yp+yb*Math.sin(sb+i*e*Math.PI/180);
logo[i].style.left=xp+xb*Math.cos(sb+i*e*Math.PI/180);
pb[i]=logo[i].style.pixelTop-yp;
pa[i]=pb[i]-pb[i]*2;
if (pa[i] < 1){
pa[i]=0;
logo[i].style.visibility='hidden';
}
else logo[i].style.visibility='visible';
logo[i].style.fontSize=pa[i]/2.7;
}
sb-=sa;
setTimeout('ani()',100);
}
window.onload=ani;
}
</script>
==============

4、會跳舞的文本

<SCRIPT language=ja;vascript>
<!--
function MM_timelinePlay(tmLnName, myID) {

var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if (document.MM_Time == null) MM_initTimelines();
tmLn = document.MM_Time[tmLnName];
if (myID == null) { myID = ++tmLn.ID; firstTime=true;}
if (myID == tmLn.ID) {
    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
    fNew = ++tmLn.curFrame;
    for (i=0; i<tmLn.length; i++) {
      sprite = tmLn[i];
      if (sprite.charAt(0) == 's') {
        if (sprite.obj) {
          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {
            keyFrm=1;
            for (j=0; j<sprite.values.length; j++) {
              props = sprite.values[j];
              if (numKeyFr != props.length) {
                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
              } else {
                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
        } } } } }
      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      if (fNew > tmLn.lastFrame) tmLn.ID = 0;
} }
}

function MM_timelineGoto(tmLnName, fNew, numGotos) {

var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
if (document.MM_Time == null) MM_initTimelines();
tmLn = document.MM_Time[tmLnName];
if (numGotos != null)
    if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
    else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
jmpFwd = (fNew > tmLn.curFrame);
for (i = 0; i < tmLn.length; i++) {
    sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i];
    if (sprite.charAt(0) == "s") {
      numKeyFr = sprite.keyFrames.length;
      firstKeyFr = sprite.keyFrames[0];
      lastKeyFr = sprite.keyFrames[numKeyFr - 1];
      if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue;
      for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
      for (j=0; j<sprite.values.length; j++) {
        props = sprite.values[j];
        if (numKeyFr == props.length) propNum = keyFrm-1
        else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1);
        if (sprite.obj != null) {
          if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
          else        sprite.obj[props.prop2][props.prop] = props[propNum];
      } }
    } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
}
tmLn.curFrame = fNew;
if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}

<DIV id=Layer1
style="HEIGHT: 52px; LEFT: 264px; POSITION: absolute; TOP: 86px; WIDTH: 58px; Z-INDEX: 1"><font color="#ff3333" face="隸書" size="7">會</font></DIV>
<DIV id=Layer2
style="HEIGHT: 27px; LEFT: 324px; POSITION: absolute; TOP: 112px; WIDTH: 36px; Z-INDEX: 2"><font color="#336600" size="5" face="隸書">跳</font></DIV>
<DIV id=Layer4
style="HEIGHT: 22px; LEFT: 363px; POSITION: absolute; TOP: 116px; WIDTH: 25px; Z-INDEX: 4"><font color="#ffff00" face="隸書" size="4">舞</font></DIV>
<DIV id=Layer5
style="HEIGHT: 1px; LEFT: 388px; POSITION: absolute; TOP: 116px; WIDTH: 1px; Z-INDEX: 5"><font color="#ff33ff" face="隸書" size="4">的</font></DIV>
<DIV id=Layer6
style="HEIGHT: 12px; LEFT: 408px; POSITION: absolute; TOP: 116px; WIDTH: 18px; Z-INDEX: 6"><font color="#0000cc" face="隸書" size="4">文</font></DIV>
<DIV id=Layer7
style="HEIGHT: 15px; LEFT: 428px; POSITION: absolute; TOP: 116px; WIDTH: 21px; Z-INDEX: 7"><font color="#ff6633" face="隸書" size="4">本</font></DIV>
<DIV id=Layer3
style="HEIGHT: 42px; LEFT: 453px; POSITION: absolute; TOP: 91px; WIDTH: 31px; Z-INDEX: 8"><B><FONT
color=#00ff00 size=+5><I><FONT
color=#009900>！</FONT></I></FONT></B></DIV>
================================================

5、文字水波效果，黑變灰，不是很明顯

</script>
==============

6、0、1數字下落有點象閃客帝國

for(j=0; j < Cols; j++){
RC[j]=1+Math.round(Math.random()*Cl);
Y[j]=0;
Sp[j]=Math.round(MnS+Math.random()*MxS);
for(i=0; i < RC[j]; i++){
B[i]='';
C[i]=Math.round(Math.random()*1)+' ';
M[j]=B[0]+=C[i];
}
}
function Cycle(){
Container.style.top=window.document.body.scrollTop;
for (i=0; i < Cols; i++){
var r = Math.floor(Math.random()*Tcc.length);
E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';
Y[i]+=Sp[i];

if (Y[i] > window.document.body.clientHeight){
for(i2=0; i2 < Cols; i2++){
RC[i2]=1+Math.round(Math.random()*Cl);
for(i3=0; i3 < RC[i2]; i3++){
B[i3]='';
C[i3]=Math.round(Math.random()*1)+' ';
C[Math.floor(Math.random()*i2)]=' '+' ';
M[i]=B[0]+=C[i3];
Y[i]=-Ts*M[i].length/1.5;
A[i].style.visibility='visible';
}
Sp[i]=Math.round(MnS+Math.random()*MxS);
}
}
A[i].style.top=Y[i];
A[i].innerHTML=M[i]+' '+E[i]+' ';
}
setTimeout('Cycle()',20)
}
Cycle();
}
// -->
</script>
==============

7、鼠標懸移到鏈接文字后出現跑馬燈式樣的說明文字

<SCRIPT LANGUAGE="ja;vascript">

</script>
<center>
<a href="#" class="link" onmouseover="ja;vascript:reset();Scroll('prem_hint');" onmouseout="ja;vascript:StopScroll('prem_hint');">鼠標移到此鏈接上，看看效果。</a>
</center>
<div id="prem_hint" style="position:relative; visibility:hidden;color:FF9900" class="prem_hint">
在這里放上對鏈接的文字說明，效果是不是很不錯呢!
</div>
====================================================

8、多條問候語句特效替換

9、變化字特效

<SCRIPT language=ja;vascript>
<!--
var thissize=20
var textfont="arial"
var textcolor= new Array()
textcolor[0]="lime"
textcolor[1]="#FF9900"
textcolor[2]="aqua"
textcolor[3]="yellow"
textcolor[4]="#FF8040"
textcolor[5]="#FFD1BB"
textcolor[6]="#CCCCFF"
textcolor[7]="#CCCC33"
textcolor[8]="#ff8040"
textcolor[9]="yellow"
textcolor[10]="lime"
textcolor[11]="#FF9900"

var message = new Array()
message[0]=" FOOWIN.COM"
message[1]="Welcome To You!"
message[2]=" FOOWIN.COM"
message[3]="Welcome To You!"

var i_blurstrength=15
var i_message=0
var i_textcolor=0

//-->
</SCRIPT>
<p id=blurthis></p>
=========================

10、文字3D效果，線腳本實現

<SCRIPT language=VBScript>
Sub Window_OnLoad()
    call SG1.Scale(0.50, 0.50, 0.50)
    call SG2.Scale(0.50, 0.50, 0.50)
    call SG3.Scale(0.50, 0.50, 0.50)
    call SG4.Scale(0.50, 0.50, 0.50)
    call SG1.Rotate(0, 0, 0)
    call SG2.Rotate(90, 0, 0)
    call SG3.Rotate(0, 90, 0)
    RotateAll
end sub

' sets rotation speed and behavior as well as creating loop

Sub RotateAll
    Call SG1.Rotate(4,6,2)
    Call SG2.Rotate(4,6,2)
    Call SG3.Rotate(4,6,2)
    Call SG4.Rotate(4,6,2)
    FILK = Window.SetTimeOut("Call RotateAll", 10, "VBSCript")
End Sub
</SCRIPT>

11、很不錯的文字展示噢~流水線

标签：文字特效

上一篇
八種風格的時間日期

下一篇
導航效果的制作方法

相關文章：

推薦設計

最新文章