js实现鼠标滑过文字链接色彩变化的效果

这篇文章主要介绍了js实现鼠标滑过文字链接色彩变化的效果,涉及javascript鼠标事件及样式操作的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
6. <title>鼠标移入移出效果</title> 
7. <style> 
8. body,ul,h2,p{ 
9. margin:0; padding:0; 
10. font-family:"微软雅黑"; 
11. background:#333; 
12. } 
13. li{list-style:none;} 
14. a{text-decoration:none;} 
15. #box{ 
16. width:270px;padding:10px 10px 20px; 
17. overflow:hidden;margin:20px auto 0; 
18. border:1px solid #FFF; 
19. } 
20. .internal{width:266px;float:left;} 
21. #box h2{ 
22. height:38px;border-bottom:1px solid #ccc; 
23. padding-left:5px; 
24. } 
25. #box h2 strong{ 
26. float:left; line-height:38px; 
27. color:#885050; 
28. } 
29. #box h2 a{ 
30. float:right;width:52px;height:14px; 
31. font-size:12px;text-indent:20px; 
32. color:#fff;line-height:12px; 
33. font-weight:normal;margin-top:10px; 
34. } 
35. #box li{ 
36. height:30px;position:relative; 
37. border-bottom:1px dashed #ccc; 
38. } 
39. #box li div,#box li p{ 
40. height:30px;position:absolute; 
41. top:0;left:0;width:100%; 
42. } 
43. #box li p{ 
44. background:#fff;opacity:0; 
45. filter:alpha(opacity=0); 
46. } 
47. #box li div a,#box li div span{ 
48. line-height:30px; 
49. font-size:12px;height:30px; 
50. } 
51. #box li div a { 
52. float:left;padding-left:5px; 
53. color:#7F5454;width:185px; 
54. overflow:hidden; 
55. } 
56. #box li div span{ 
57. padding-right:10px; 
58. float:right;color:#CF9494; 
59. } 
60. </style> 
61. <script type="text/javascript"> 
62. window.onload=function() 
63. { 
64. var d=document; 
65. var oBox=d.getElementById('box'); 
66. var aLi=oBox.getElementsByTagName('li'); 
67. var i=0; 
68. for(i=0;i<aLi.length;i++) 
69. { 
70. var oP=aLi[i].getElementsByTagName('p')[0]; 
71. oP.iAlpha=0; 
72. oP.times=null; 
73. aLi[i].onmouseover=function() 
74. { 
75. oP=this.getElementsByTagName('p')[0]; 
76. oP.times && clearInterval(oP.times); 
77. oP.style.opacity=1; 
78. oP.style.filter="alpha(opacity=100)"; 
79. oP.iAlpha=100; 
80. }; 
81. aLi[i].onmouseout=function() 
82. { 
83. startMove(this.getElementsByTagName('p')[0]) 
84. }; 
85. } 
86. }; 
87. function startMove(obj) 
88. { 
89. obj.times && clearInterval(obj.time); 
90. obj.times=setInterval(function() 
91. { 
92. doMove(obj); 
93. },10); 
94. } 
95. function doMove(obj) 
96. { 
97. var iSpeed=5; 
98. if(obj.iAlpha<=iSpeed) 
99. { 
100. clearInterval(obj.times); 
101. obj.iAlpha=0; 
102. obj.time=null; 
103. } 
104. else 
105. { 
106. obj.iAlpha-=iSpeed; 
107. } 
108. obj.style.filter="alpha(opacity="+obj.iAlpha+")"; 
109. obj.style.opacity=obj.iAlpha/100; 
110. } 
111. </script> 
112. </head> 
113. <body> 
114. <div id="box"> 
115. <div class="internal"> 
116. <h2><strong>网页特效代码</strong> 
117. <a href="http://www.vevb.com/">more</a></h2> 
118. <ul> 
119. <li> 
120. <p></p> 
121. <div> 
122. <a href="http://www.vevb.com/"> 广告代码特效大全 </a> 
123. <span>2011-09-10</span> 
124. </div> 
125. </li> 
126. <li> 
127. <p></p> 
128. <div> 
129. <a href="http://www.vevb.com/"> JS特效代码集锦 </a> 
130. <span>2011-09-10</span> 
131. </div> 
132. </li> 
133. <li> 
134. <p></p> 
135. <div> 
136. <a href="http://www.vevb.com/">商业网页模板与光盘素材</a> 
137. <span>2011-09-10</span> 
138. </div> 
139. </li> 
140. <li> 
141. <p></p> 
142. <div> 
143. <a href="http://www.vevb.com/">网页制作教程</a> 
144. <span>2011-09-10</span> 
145. </div> 
146. </li> 
147. <li> 
148. <p></p> 
149. <div> 
150. <a href="http://www.vevb.com/">网站源码整站源代码下载</a> 
151. <span>2011-09-10</span> 
152. </div> 
153. </li> 
154. <li> 
155. <p></p> 
156. <div> 
157. <a href="http://www.vevb.com/"> 网页电子书下载 </a> 
158. <span>2011-09-10</span> 
159. </div> 
160. </li> 
161. <li> 
162. <p></p> 
163. <div> 
164. <a href="http://www.vevb.com/"> 免费网页模板下载 </a> 
165. <span>2011-09-10</span> 
166. </div> 
167. </li> 
168. </ul> 
169. </div> 
170. </div> 
171. </body> 
172. </html> 

希望本文所述对大家的javascript程序设计有所帮助。