一个不错的渐隐文字效果

软件发布|下载排行|最新软件

当前位置：首页 → IT学院 → IT技术 →

一个不错的渐隐文字效果

2020-05-12 我要评论

我想实现一个，点一下按钮，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>  
                                          
                                      <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> 
                                         
                                      <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> 
                                         
                                      <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需刷新才能执行]

相关文章

又一个小巧的图片预加载类

猜您喜欢

今日热门

Copyright 2022 版权所有软件发布访问手机版

声明：所有软件和文章来自软件开发商或者作者如有异议请与本站联系联系我们