41.使用按钮控制文本渐变

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4 <html xmlns="http://www.w3.org/1999/xhtml" >
  5 <head>
  6 <title>标题页</title>
  7 <SCRIPT LANGUAGE="JavaScript">
  8 var x=9;
  9 var change="on"
 10 if (navigator.appName == "Netscape") {  //浏览器是netscape的情况
 11     visShow="'show'";                   //显示的命令
 12     visHide="'hide'";                   //隐藏的命令
 13     docStyle="document.";
 14     styleDoc="";
 15 }
 16 else {                                 //浏览器是IE的情况
 17     visHide="'hidden'";                //显示的命令
 18     visShow="'visible'";               //隐藏的命令
 19     docStyle="";
 20     styleDoc=".style";                 //设置样式的命令
 21 }
 22 function hide1() {
 23 eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visHide);//隐藏第一个div
 24 }
 25 function hide2() {
 26 eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visHide);//隐藏第二个div
 27 }
 28 function hide3() {
 29 eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visHide);//隐藏第三个div
 30 }
 31 function hide4() {
 32 eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visHide);//隐藏第四个div
 33 }
 34 function hide5() {
 35 eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visHide);//隐藏第五个div
 36 }
 37 function hide6() {
 38 eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visHide);//隐藏第六个div
 39 }
 40 function hide7() {
 41 eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visHide);//隐藏第七个div
 42 }
 43 function hide8() {
 44 eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visHide);//隐藏第八个div
 45 }
 46 function hide9() {
 47 eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visHide);//隐藏第九个div
 48 }
 49 function hide10() {
 50 eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visHide);//隐藏第十个div
 51 }
 52 function show1() {
 53 eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visShow);//显示第一个div
 54 hide2(),hide3();
 55 }
 56 function show2() {
 57 eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visShow);//显示第二个div
 58 hide1(),hide3();
 59 }
 60 function show3() {
 61 eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visShow);//显示第三个div
 62 hide2(),hide4();
 63 }
 64 function show4() {
 65 eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visShow);//显示第四个div
 66 hide3(),hide5();
 67 }
 68 function show5() {
 69 eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visShow);//显示第五个div
 70 hide4(),hide6();
 71 }
 72 function show6() {
 73 eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visShow);//显示第六个div
 74 hide5(),hide7();
 75 }
 76 function show7() {
 77 eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visShow);//显示第七个div
 78 hide6(),hide8();
 79 }
 80 function show8() {
 81 eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visShow);//显示第八个div
 82 hide7(),hide9();
 83 }
 84 function show9() {
 85 eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visShow);//显示第九个div
 86 hide8(),hide10();
 87 }
 88 function show10() {
 89 eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visShow);//显示第十个div
 90 hide9();
 91 }
 92 function change1() {
 93 x+=1;
 94 eval("show" + x + "()");                          //逐个显示div,从1到10
 95 if (x<10) setTimeout("change1()", 75);            //一直在此方法中循环
 96 else if (change=="on") change2();                 //开始调用第二个循环方法            
 97 }
 98 function change2() {
 99 x-=1;                                             //逐个显示div，从10到1
100 eval("show" + x + "()");
101 if (x>1) setTimeout("change2()", 75);             //一直在此方法中循环     
102 else change1();                                   //开始调用第一个循环方法
103 }
104 function changeOn() {                              //开始变化的控制
105     x=9;
106     change="on";
107     change1();
108 }
109 function changeOff() {                            //结束变化的控制
110     change="off";
111 }
112 </SCRIPT>
113 </head>
114 <body>
115 <div id="vis" style="position:absolute; visibility:show; left:10px; top:10px; z-index:1">
116 <table cellpadding=2 border=1><tr>
117 <td><center><b>颜色变化控制</b></center></font></a></td>
118 <td><a href="javascript:changeOn()">
119 <font color="#000000"><center>开始渐变</center></font></a></td>
120 <td><a href="javascript:changeOff()">
121 <font color="#000000"><center>结束渐变</center></font></a></td>
122 </tr></table></div>
123 
124 <div id="object1" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
125 <table border=1 bgcolor=#eaffff width=175 height=50><td><center><b><font color="#F9F9F9">看看我的颜色变化</font></b></center></td></table>
126 </div>
127 <div id="object2" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
128 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#ECECEC">看看我的颜色变化</font></b></center></td></table>
129 </div>
130 <div id="object3" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
131 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#D5D5D5">看看我的颜色变化</font></b></center></td></table>
132 </div>
133 <div id="object4" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
134 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#C0C0C0">看看我的颜色变化</font></b></center></td></table>
135 </div>
136 <div id="object5" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
137 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#b0b0b0">看看我的颜色变化</font></b></center></td></table>
138 </div>
139 <div id="object6" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
140 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#939393">看看我的颜色变化</font></b></center></td></table>
141 </div>
142 <div id="object7" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
143 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#808080">看看我的颜色变化</font></b></center></td></table>
144 </div>
145 <div id="object8" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
146 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#6b6b6b">看看我的颜色变化</font></b></center></td></table>
147 </div>
148 <div id="object9" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
149 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#424242">看看我的颜色变化</font></b></center></td></table>
150 </div>
151 <div id="object10" style="position:absolute; visibility:show; left:10px; top:50px; z-index:1">
152 <table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#000000">看看我的颜色变化</font></b></center></td></table>
153 </div><P>
154 </FONT></CENTER>
155 </body>
156 </html>
posted on 2017-02-28 00:41 Sharpest 阅读(189) 评论(0) 收藏举报