关注公众号 jb51net

关闭

首页 > 网络编程 > JavaScript > 网页特效 > 典型特效 >

一个不错的渐隐文字效果

2007-05-05 00:00:00 作者：

一个不错的渐隐文字效果

我想实现一个，点一下按钮，text里面的文字渐渐消失，换成别的文字后，又渐渐出现的功能。
主要是这个函数
function chgtext() {
        hidetext();
        ide++;
        document.all.title.value=ide;
        showtext();
}
点一下执行一次这个函数，可是实现不了，请大家帮忙改一下，谢谢

<!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=153;

function hidetext() {  
    document.getElementById("title").style.color="rgb(" + col + "," + col + "," + col + ")";   
    if (col != 0){col -= 1;}  
    setTimeout('hidetext()', 10);   
}

function showtext() {  
    document.getElementById("title").style.color="rgb(" + col + "," + col + "," + col + ")";   
    if (col != 153){col += 1;}  
    setTimeout('showtext()', 10);   
}

var ide=0;

function chgtext() {  
    hidetext();  
    ide++;  
        document.all.title.value=ide;  
    showtext();  
}  
</script>

</style>  
</head>

<body>

<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="chgtext()">  
                              
</form>  
                              
</body>  
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

效果一

<!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('chg()', 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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

效果二：

<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('chg()', 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('chg2()', 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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章: