一个不错的渐隐文字效果-JS Tutorial-php.cn

一个不错的渐隐文字效果

PHP中文网

Release： 2016-05-16 19:13:59

Original

1606 people have browsed it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档</title> 
<script language="JavaScript"> 
var col=255; 
var se=1 
function chg() { 
    document.getElementById("title").style.color="rgb(" + col + "," + col + "," + col + ")";  
    if (col == 0){se = 1;} 
    else if(col == 255){se = -1;} 
     
    col += se; 
    setTimeout(&#39;chg()&#39;, 10);  
} 
</script> 
</style> 
</head> 
<body onload="chg()"> 
<form name="titlechk"> 
                            <tr> 
                                <td width="210" colspan="6" background="img/jb_bg_t2.jpg"> 
                                    <div id="inputbox" style="margin-left: 11px; margin-bottom: 2px;"> 
                                         
                                      <input id="title" type="text" name="stitle" class="tmptxt" value="GuitarMusic" style="font-size: 12px; width: 180px; height: 16px; border: none;" readonly align="absmiddle"> 
                                  </div> 
                                </td> 
                            </tr> 
                            <input name="text1" type="button" onClick="chg()"> 
                             
</form> 
                             
</body> 
</html>

Copy after login

<script language="JavaScript"> 
var col=000; 
var se=3 
var txt = new Array() 
txt[0] = "0" 
txt[1] = "1" 
txt[2] = "2" 
txt[3] = "3" 
var all=1; 
function chg() { 
        document.getElementById("title1").style.color="rgb(" + col + "," + col + "," + col + ")";  
    if (col < 255 ){ 
    se = 15; 
    col += se; 
var    aaa=setTimeout(&#39;chg()&#39;, 1); 
    } 
    else {window.clearTimeout(aaa);chgtext();} 
} 

function chg2() { 
    document.getElementById("title1").style.color="rgb(" + col + "," + col + "," + col + ")";  
    if (col > 0 ){ 
    se = 15; 
    col -= se; 
var    aaa=setTimeout(&#39;chg2()&#39;, 1); 
    } 
    else {window.clearTimeout(aaa);} 
} 
function chgtext() { 
       if(all==txt.length){document.getElementById("title1").value=txt[0];all=0;all+=1;} 
else{document.getElementById("title1").value=txt[all];all=all+1;}; 

chg2(); 
     
} 
</script> 



<form name="titlechk"> 
                            <tr> 
                                <td width="210" colspan="6" background="img/jb_bg_t2.jpg"> 
                                    <div id="inputbox" style="margin-left: 11px; margin-bottom: 2px;"> 
                                         
                                      <input id="title1" type="text" name="stitle" class="tmptxt" value="0" style="font-size: 12px; width: 180px; height: 16px; border: none;" readonly align="absmiddle"> 
                                  </div> 
                                </td> 
                            </tr> 
                            <input name="text1" type="button" onClick="chg()"> 
                             
</form>

Copy after login