軟件
                        
    
                            
  • 綜合
    • 
                            
  • 軟件
    • 
                            
  • 文章
    • 
                            
  • 安卓
    • 
                        

                    
搜索

            

            

                pscc2017autocad2018dreamweaver2017草圖大師2017Visio 2016
            

        

    



  

    

      
    

  





  
 當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 使用按鈕控制文本漸變 





  

    
    

      
      

        
使用按鈕控制文本漸變

        
2012/10/18 10:45:55作者：佚名來源：網絡

        
移動端
          

        

      

      
            
【實例名稱】
使用按鈕控制文本漸變
【實例描述】
文本漸變是一種吸引用戶眼球的特效，本例通過兩個按鈕，實現對文本漸變的控制。當用戶單擊“開始漸變”按鈕時，文本就會實現漸變的效果，當單擊“結束漸變”按鈕時，文本還原成初始狀態。
【實例代碼】
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
<SCRIPT LANGUAGE="JavaScript">
var x=9;
var change="on"
if (navigator.appName == "Netscape") {  //瀏覽器是netscape的情況
    visShow="'show'";                   //顯示的命令
    visHide="'hide'";                   //隱藏的命令
    docStyle="document.";
    styleDoc="";
}
else {                                 //瀏覽器是IE的情況
    visHide="'hidden'";                //顯示的命令
    visShow="'visible'";               //隱藏的命令
    docStyle="";
    styleDoc=".style";                 //設置樣式的命令
}
function hide1() {
eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visHide);//隱藏第一個div
}
function hide2() {
eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visHide);//隱藏第二個div
}
function hide3() {
eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visHide);//隱藏第三個div
}
function hide4() {
eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visHide);//隱藏第四個div
}
function hide5() {
eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visHide);//隱藏第五個div
}
function hide6() {
eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visHide);//隱藏第六個div
}
function hide7() {
eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visHide);//隱藏第七個div
}
function hide8() {
eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visHide);//隱藏第八個div
}
function hide9() {
eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visHide);//隱藏第九個div
}
function hide10() {
eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visHide);//隱藏第十個div
}
function show1() {
eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visShow);//顯示第一個div
hide2(),hide3();
}
function show2() {
eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visShow);//顯示第二個div
hide1(),hide3();
}
function show3() {
eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visShow);//顯示第三個div
hide2(),hide4();
}
function show4() {
eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visShow);//顯示第四個div
hide3(),hide5();
}
function show5() {
eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visShow);//顯示第五個div
hide4(),hide6();
}
function show6() {
eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visShow);//顯示第六個div
hide5(),hide7();
}
function show7() {
eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visShow);//顯示第七個div
hide6(),hide8();
}
function show8() {
eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visShow);//顯示第八個div
hide7(),hide9();
}
function show9() {
eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visShow);//顯示第九個div
hide8(),hide10();
}
function show10() {
eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visShow);//顯示第十個div
hide9();
}
function change1() {
x+=1;
eval("show" + x + "()");                          //逐個顯示div,從1到10
if (x<10) setTimeout("change1()", 75);            //一直在此方法中循環
else if (change=="on") change2();                 //開始調用第二個循環方法            
}
function change2() {
x-=1;                                             //逐個顯示div，從10到1
eval("show" + x + "()");
if (x>1) setTimeout("change2()", 75);             //一直在此方法中循環     
else change1();                                   //開始調用第一個循環方法
}
function changeOn() {                              //開始變化的控制
    x=9;
    change="on";
    change1();
}
function changeOff() {                            //結束變化的控制
    change="off";
}
</SCRIPT>
</head>
<body>
<div id="vis" style="position:absolute; visibility:show; left:10px; top:10px; z-index:1">
<table cellpadding=2 border=1><tr>
<td><center><b>顏色變化控制</b></center></font></a></td>
<td><a href="javascript:changeOn()">
<font color="#000000"><center>開始漸變</center></font></a></td>
<td><a href="javascript:changeOff()">
<font color="#000000"><center>結束漸變</center></font></a></td>
</tr></table></div>
<div id="object1" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=#eaffff width=175 height=50><td><center><b><font color="#F9F9F9">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object2" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#ECECEC">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object3" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#D5D5D5">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object4" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#C0C0C0">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object5" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#b0b0b0">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object6" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#939393">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object7" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#808080">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object8" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#6b6b6b">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object9" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#424242">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object10" style="position:absolute; visibility:show; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#000000">看看我的顏色變化</font></b></center></td></table>
</div><P>
</FONT></CENTER>
</body>
</html>

【運行效果】
 漸變效果1
漸變效果2
【難點剖析】
本例的重點是“change1”和“change2”方法。通過“change1”方法的循環執行，分別調用顯示div的10個方法，然后再通過“change2”方法的循環，調用隱藏的10個方法。代碼中有個技巧“eval”（“show”+x+“（）”）”，使用“eval”方法可以將這些普通字符串，連接成一個函數名。
【源碼下載】
本實例JS代碼下載

      
      

        

          
       

        

      

      
      

        
標簽：
          按鈕            

        
      

      
      

        
相關文章

        
      

      
      

        
 熱門軟件/ 推薦游戲/ 手機軟件 

        

          
          
          
          
          
          
        

      

      
      

        

      

      
    


    
    

      

        
資訊分類

      

      

                Dreamweaver
                Flash
                DIV+CSS
                編程其他
              

      

        
推薦教程

      

      

        
      

      

        
精品軟件推薦

      

      

        

          

          
        

      

    

  






            
 ∧ 

        

    


    

        

            Copyright2012-2022 軟件學堂(www.yzddtk.cn).All Rights Reserved

            備案編號:贛ICP備2023000421號
                    

    





欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频 视频,欧美一级特黄录像视频