表格鼠标经过有底色的js

用了优快云 ID叫火龙果的网友的js

1. /**
2. *仿Prototype的$方法
3. */
4. window.$=function(id){
5. if(typeofid=='string'){
6. returndocument.getElementById(id);
7. }
8. returnid;
9. }
11. /**
12. *色彩渐变
13. *@paramstart起始颜色，使用#颜色表
14. *@paramend终止颜色
15. *@paramstep渐变步长，大于1并且小于200，默认为16
16. */
17. varColorGradient=function(start,end,step){
18. this.start=this._toRGB(start);
19. this.end=this._toRGB(end);
20. this.step=(function(){
21. if(!step||step<1||step>200){
22. return16;
23. }
24. returnstep;
25. })();
26. this.gradient=[];
27. }
29. ColorGradient.prototype={
31. //获得渐变的颜色数组，以6位十六进制字符串返回
32. getGradient:function(){
33. returnthis._getGradient();
34. },
36. //获得所设定的步长值
37. getStep:function(){
38. returnthis.step;
39. },
41. //测试工作，用于在页面上渐变测试
42. test:function(){
43. vargrad=this._getGradient();
44. varn=400/this.step;
45. varp=document.createElement('div');
46. for(vari=0;i<grad.length;i++){
47. vard=document.createElement('div');
48. d.className='grad';
49. d.style.width=n+'px';
50. d.style.backgroundColor='#'+grad[i];
51. p.appendChild(d);
52. }
53. document.body.appendChild(p);
54. },
56. //生成渐变色数组
57. _getGradient:function(){
58. if(this.gradient.length>0){
59. //如果渐变色变量中有值直接返回
60. returnthis.gradienth;
61. }
62. //生成各步的颜色
63. for(vari=0;i<=this.step;i++){
64. varcolor=this._getNewColor(i).toString(16);
65. while(color.length<6){
66. color='0'+color;
67. }
68. this.gradient.push(color);
69. }
70. returnthis.gradient;
71. },
73. //根据RGB变化量获得每步的RGB颜色
74. _getNewColor:function(k){
75. varrgbStep=this._getStepRgb();
76. varrgb=0;
77. for(vari=0;i<3;i++){
78. varc=Math.floor(this.start[i]+rgbStep[i]*k);
79. rgb|=c<<((3-i-1)*8);
80. }
81. returnrgb;
82. },
84. //获得RGB三种颜色的变化量
85. _getStepRgb:function(){
86. varrgb=[];
87. //依次获得R、G、B的变化步长
88. for(vari=0;i<3;i++){
89. rgb.push(this._getStepVar(i));
90. }
91. returnrgb;
92. },
94. //根据渐变步长、起始、终止颜色获得步长的变化量
95. _getStepVar:function(index){
96. return(this.end[index]-this.start[index])/this.step;
97. },
99. //将#颜色转换成RGB颜色数组
100. //索引0--红色R
101. //索引1--绿色G
102. //索引2--蓝色B
103. _toRGB:function(color){
104. varv=color.substring(1);
105. varc=parseInt(v,16);
106. varrgb=[];
107. for(vari=0;i<3;i++){
108. rgb.push(c>>((3-i-1)*8)&0xff);
109. }
110. returnrgb;
111. }
112. }
114. /**
115. *事件处理工具类
116. */
117. varEvent=function(){}
119. Event={
121. /**
122. *为element使用handler处理程序添加至event事件
123. *兼容IE及Firefox等浏览器
124. *
125. *例如为botton对象添加onclick事件，使用clickEvent
126. *方法作为处理程序：
127. *Event.addEvent(botton,'click',clickEvent);
128. *
129. *@paramelement需要添加事件的对象（Object）
130. *@paramevent需要添加的事件名称（String），不加“on”
131. *@paramhandler需要添加的方法引用（Function）
132. */
133. addEvent:function(element,event,handler){
134. if(element.attachEvent){
135. element.attachEvent('on'+event,handler);
136. }elseif(element.addEventListener){
137. element.addEventListener(event,handler,false);
138. }else{
139. element['on'+event]=handler;
140. }
141. },
143. /**
144. *添加事件处理程序时，只能添加一个方法的引用，并不能给
145. *方法加上参数。比如定义了clickEvent(str)这个方法，现
146. *在要将其作为obj的onclick的事件处理程序，就可以用：
147. *obj.onclick=Event.getFuntion(null,clickEvent,str);
148. */
149. getFunction:function(obj,fun){
150. varargs=[];
151. obj=obj||window;
152. for(vari=2;i<arguments.length;i++){
153. args.push(arguments[i]);
154. }
155. returnfunction(){
156. fun.apply(obj,args);
157. };
158. }
159. }
161. varTable=function(id,time,start,end){
163. this.rows=(function(){
164. vartab=$(id);
165. if(tab.tBodies.length==0){
166. returntab.rows;
167. }
168. varrows=[];
169. for(vari=0;i<tab.tBodies.length;i++){
170. for(varj=0;j<tab.tBodies[i].rows.length;j++){
171. rows.push(tab.tBodies[i].rows[j]);
172. }
173. }
174. returnrows;
175. })();
176. this.start=start||Table.DEFAULT_START;
177. this.end=end||Table.DEFAULT_END;
178. this.time=time||Table.DEFAULT_TIME;
179. varcolor=newColorGradient(this.start,this.end,16);
180. this.grad=color.getGradient();
181. this.step=color.getStep();
182. }
184. Table.DEFAULT_TIME=10;
185. Table.DEFAULT_START='#dcdcdc';
186. Table.DEFAULT_END='#ffffff';
188. Table.prototype={
189. addEvent:function(){
190. for(vari=0;i<this.rows.length;i++){
191. this.rows[i].style.backgroundColor=this.end;
192. Event.addEvent(this.rows[i],'mouseover',
193. Event.getFunction(this,this.overEvent,this.rows[i]));
194. Event.addEvent(this.rows[i],'mouseout',
195. Event.getFunction(this,this.outEvent,this.rows[i]));
196. }
197. },
198. overEvent:function(row){
199. row.style.backgroundColor=this.start;
200. row.change=this.step;
201. },
202. outEvent:function(row){
203. varme=this;
204. if(row.change-->0){
205. row.style.backgroundColor='#'+me.grad[me.step-row.change];
206. setTimeout(function(){
207. me.outEvent(row);
208. },this.time);
209. }
210. },
212. _getRows:function(id){
213. vartab=$(id);
214. alert(tab.tBodies.length);
215. }
216. }

保存为 tableboder.js

然后新建一个html

1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html>
3. <head>
4. <metahttp-equiv="Content-Type"content="text/html;charset=gbk"/>
5. <title>Table</title>
6. <scriptlanguage="javascript"src="tableboder.js"></script>
7. <scripttype="text/javascript">
8. /**
9. *
10. *调用方法就是下面，用表格id把tablenew出来，加上事件。
11. */
12. window.onload=function(){
13. vartab1=newTable('tab1');
14. tab1.addEvent();
15. }
16. </script>
17. </head>
18. <styletype="text/css">
19. div.grad{
20. float:left;
21. height:100px;
22. margin:0;
23. padding:0;
24. }
25. table{
26. border-top:1pxsolidblack;
27. border-left:1pxsolidblack;
28. border-spacing:0;
29. font-family:宋体,新宋体;
30. }
31. tabletd{
32. border-bottom:1pxsolidblack;
33. border-right:1pxsolidblack;
34. padding:2px5px;
35. }
36. </style>
38. <body>
39. <tableid='tab1'width="60%"align="center">
40. <tr>
41. <td>1</td>
42. <td>2</td>
43. <td>3</td>
44. <td>4</td>
45. </tr>
46. <tr>
47. <td>5</td>
48. <td>6</td>
49. <td>7</td>
50. <td>8</td>
51. </tr>
52. <tr>
53. <td>1</td>
54. <td>2</td>
55. <td>3</td>
56. <td>4</td>
57. </tr>
58. <tr>
59. <td>5</td>
60. <td>6</td>
61. <td>7</td>
62. <td>8</td>
63. </tr>
64. <tr>
65. <td>1</td>
66. <td>2</td>
67. <td>3</td>
68. <td>4</td>
69. </tr>
70. <tr>
71. <td>5</td>
72. <td>6</td>
73. <td>7</td>
74. <td>8</td>
75. </tr>
76. </table>
77. </body>
78. </html>

下面是个非常需要注意的小问题

引入外部js时，<scriptlanguage="javascript"src="tableBoder.js"></script>必须写language 属性，而不能使type属性。