新版泥客入口

首页 | 新闻 | 网址 | 博客 | 科技 | 非凡 | 杂烩 | 掉牙 | 美图 | 文集 | 扯淡 | 精屁 | 商务 | 网页制作 | 论坛

 
   泥客网>>网页制作  
 
 
  文字特效:渐变文本

文章来源: BBS.KESONIC.COM

<HEAD>
<TITLE>Faded Text</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>


特效演示:www.kesonic.com/kc/design/show/09.htm



  2007/12/3 12:42:34  阅读 2851 次   [关闭窗口] [打印本页]

相关文章: 近期热点:

视频播放代码(real player) (4548)
控制网页中字体大小的简单方法(锁定... (4537)
根据时间变换的提示信息 (4492)
环绕转动的欢迎标语代码 (4482)
视频播放代码(windows me... (4403)


一些简单实用的HTML代码 (5170)
收集了一些有关网页设计的问题集 (4796)
40种网页常用小技巧(JavaSc... (4675)
视频播放代码(real player) (4548)
控制网页中字体大小的简单方法(锁定... (4537)
根据时间变换的提示信息 (4492)
环绕转动的欢迎标语代码 (4482)
视频播放代码(windows me... (4403)
做网站的必要准备↑
关于Kesonic.com - 站内搜索 - 泥客论坛 - 泥客留言 - 泥客简介 - 网站地图 - 管理
  Copyright 2002-2011 泥客网—小轲之家 All Rights Reserved