渐变字的效果-网页编程网

当前位置：主页 >> 网页特效 >> 正文

渐变字的效果

阅读：4048 输入：2017-01-04 09:40:20

<HTML>
<HEAD>
<TITLE>渐变字的效果</TITLE>
</HEAD>
<body bgcolor="ffffff">
<script>
<!-- Hide the script from old browsers --
function MakeArray(n){   
    this.length=n;   
    for(var i=1; i<=n; i++) this[i]=i-1;   
        return this
    }
    hex=new MakeArray(16);
    hex[11]="A"; 
    hex[12]="B"; 
    hex[13]="C"; 
    hex[14]="D"; 
    hex[15]="E"; 
    hex[16]="F";

function ToHex(x){              
    // Changes a int to hex (in the range 0 to 255)   
    var high=x/16;   
    var s=high+"";               
    //1   
    s=s.substring(0,2);          
    //2 the combination of these are the same as the trunc function   
    high=parseInt(s,10);         
    //3   
    var left=hex[high+1];        
    // left part of the hex-value   
    var low=x-high*16;           
    // calculate the rest of the values   
    s=low+"";                    
    //1   
    s=s.substring(0,2);          
    //2 the combination of these are the same as the trunc function   
    low=parseInt(s,10);          
    //3   
    var right=hex[low+1];        
    // right part of the hex-value   
    var string=left+""+right;    
    // add the high and low together   
    return string;
}

function fadein(text){   
    text=text.substring(3,text.length-4);        
    // gets rid of the HTML-comment-tags   
    color_d1=255;                                
    color_d1b=255;
    color_d1c=255;
    // any value in 'begin' 0 to 255   
    mul=color_d1/text.length;   
    for(i=0;i<text.length;i++){      
        color_d1=mul*i; 
        color_d1b=255-mul*i;
        color_d1c=255*Math.sin(i/(text.length/3));

// some other things you can try>> "=255-mul*i" to fade out, "=mul*i" to fade in, or try "255*Math.sin(i/(text.length/3))"      
        color_h1=ToHex(color_d1);      
        color_d2=mul*i;      
        color_h2=ToHex(color_d2);      
        //1b
        color_h1b=ToHex(color_d1b);      
        color_d2b=mul*i;      
        color_h2b=ToHex(color_d2b);      
        //1c
        color_h1c=ToHex(color_d1c);      
        color_d2c=mul*i;      
        color_h2c=ToHex(color_d2c);

document.write("<FONT COLOR='#FF"+color_h1+color_h2+"'>"+text.substring(i,i+1)+'</FONT>');

}
    document.write('<p>');
    for(i=0;i<text.length;i++){      
        color_d1=mul*i; 
        color_d1b=255-mul*i;
        color_d1c=255*Math.sin(i/(text.length/3));

document.write("<FONT COLOR='#FF"+color_h1c+color_h2c+"'>"+text.substring(i,i+1)+'</FONT>');

}
    document.write('<p>');
    for(i=0;i<text.length;i++){      
        color_d1=mul*i; 
        color_d1b=255-mul*i;
        color_d1c=255*Math.sin(i/(text.length/3));

document.write("<FONT COLOR='#FF"+color_h1b+color_h2b+"'>"+text.substring(i,i+1)+'</FONT>');

}

}
// --End Hiding Here -->
</script>
<center><font size=7>渐 变 文 本</font>
<hr width=80%>

<SCRIPT>
这是一个渐变文本的例子.<!__");
}
//-->
</SCRIPT>
</center>

</body>
</html>

相关阅读: js实现背景闪烁效果; javascript控制图片或div层的上下移动滚动效果; js实现文字围绕鼠标转动特效