JS+DIV实现鼠标划过切换层效果的方法

这篇文章主要介绍了JS+DIV实现鼠标划过切换层效果的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下

本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法。分享给大家供大家参考。具体实现方法如下：

1. <html> 
2. <head> 
3. <title>DIV层切换</title> 
4. <script language="JavaScript" type="text/javascript">  
5. /********************************************* 
6. 功能: 通用DIV切换函数 
7. 参数: divID --当前DIV的ID号；divName 
8. --要改变的这一组DIV的命名前缀；zDivCount --这一组DIV的个数-1 
9. BY : JetKing 2007.06  
10. *********************************************/ 
11. function ChangeDiv(divId,divName,zDivCount)  
12. {  
13. for(i=0;i<=zDivCount;i++) 
14. { 
15. document.getElementById(divName+i).style.display="none";  
16. } 
17. document.getElementById(divName+divId).style.display="block";  
18. } 
19. </script>  
20. </head> 
21. <body> 
22. 层切换示例：<br>By:JetKing(www.80Boby.Com)<br> 
23. <span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" 
24. style="cursor:hand;">内容一</span> 
25. <span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" 
26. style="cursor:hand;">内容二</span> 
27. <span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" 
28. style="cursor:hand;">内容三</span> 
29. <div id="BigDIV" 
30. style="border:solid 1px #cccccc;width:460px;margin:10px;"> 
31. <div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;"> 
32. 内容部分第一区<br><img src="images/common/watermark.gif"></div>  
33. <div id="JKDiv_1" 
34. style="display:none;font-size:14px;margin:10px;color:#FF0000;"> 
35. 内容部分第二区<br><img src="logo.gif"></div>  
36. <div id="JKDiv_2" 
37. style="display:none;font-size:14px;margin:10px;color:#FF0000;"> 
38. 内容部分第三区</div>  
39. </div> 
40. </body> 
41. </html> 

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