叶子谷- 网页教程

RSS订阅 站长资讯通告:
搜索: 您现在的位置: 叶子谷 >> 网页特效 >> 文本特效 >> 正文

渐变字的效果

2008-06-10 13:50:46 来源:网络 作者:佚名 【 点击:

<!--完整的HTML代码如下:-->
<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));

        // 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_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));

        // 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_h1b+color_h2b+"'>"+text.substring(i,i+1)+'</FONT>');  

    }

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

<SCRIPT LANGUAGE="JavaScript">
<!--  
{
    fadein("-->这是一个渐变文本的例子.<!__");
}
//-->
</SCRIPT>
</center>
<!-- HINT--Don't forget to add this argument to your BODY tag:  onLoad="ticker()" -->
</body>
</html>

 

Tags: 文本特效  
责任编辑:cptedu
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】   
  • 上一篇文章:
  • 下一篇文章:
  • 姓 名: * Oicq:
    评 分: 1分 2分 3分 4分 5分
    评论内容:
    广告也精采
    热门文章
    设为首页 -加入收藏 - 联系我们 - 友情链接 - 版权声明 - 管理登陆