JavaScript实现鼠标点击后层展开效果的方法

这篇文章主要介绍了JavaScript实现鼠标点击后层展开效果的方法,可实现点击文字缓慢展开层的效果,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JavaScript实现鼠标点击后层展开效果的方法。分享给大家供大家参考。具体分析如下：

这段JavaScript代码可实现鼠标点击后层展开的功能，代码稍嫌复杂，重在学习研究，有兴趣的可以修改简化一下。

1. <html> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
4. <title>层展开折叠</title> 
5. </head> 
6. <body> 
7. <style type="text/css"> 
8. DIV.clTopMenu{ 
9. position:absolute; 
10. width:101; 
11. height:150; 
12. clip:rect(0,101,14,0); 
13. visibility:hidden; 
14. z-index:31; 
15. layer-background-color:#EEEEEE; 
16. background-color:#00CCFF 
17. } 
18. DIV.clTopMenuBottom{ 
19. position:absolute; 
20. width:101; 
21. height:3; 
22. clip:rect(0,101,3,0); 
23. top:11; 
24. layer-background-color:#CECFCE; 
25. background-color:#000099; 
26. z-index:2 
27. } 
28. DIV.clTopMenuText{ 
29. position:absolute; 
30. width:91; 
31. left:5; 
32. top:15; 
33. font-family:"Arial", "Helvetica", "sans-serif"; 
34. font-size:9pt; 
35. background-color:#EEEEEE; 
36. z-index:1; 
37. color: #000000 
38. }  
39. a:link { 
40. color: #000000; 
41. text-decoration: none 
42. } 
43. </style> 
44. <script language="JavaScript" type="text/javascript"> 
45. function lib_bwcheck(){ //Browsercheck (needed) 
46. this.ver=navigator.appVersion 
47. this.agent=navigator.userAgent 
48. this.dom=document.getElementById?1:0 
49. this.opera5=this.agent.indexOf("Opera 5")>-1 
50. this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;  
51. this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; 
52. this.ie4=(document.all && !this.dom && !this.opera5)?1:0; 
53. this.ie=this.ie4||this.ie5||this.ie6 
54. this.mac=this.agent.indexOf("Mac")>-1 
55. this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;  
56. this.ns4=(document.layers && !this.dom)?1:0; 
57. this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) 
58. return this 
59. } 
60. var bw=new lib_bwcheck() 
61. nPlace=0 
62. var nNumberOfMenus=2 
63. var nMwidth=101 
64. var nPxbetween=20 
65. var nFromleft=10  
66. var nFromtop=20 
67. var nBgcolor='#CECFCE' 
68. var nBgcolorchangeto='#6380BC' 
69. var nImageheight=11  
70. function makeNewsMenu(obj,nest){ 
71. nest=(!nest) ? "":'document.'+nest+'.' 
72. this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;  
73. this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;  
74. this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight 
75. this.moveIt=b_moveIt;this.bgChange=b_bgChange; 
76. this.slideUp=b_slideUp; this.slideDown=b_slideDown; 
77. this.clipTo=b_clipTo; 
78. this.obj = obj + "Object"; eval(this.obj + "=this")  
79. } 
80. function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} 
81. function b_bgChange(color){if(bw.dom || bw.ie4) this.css.backgroundColor=color; else this.css.bgColor=color} 
82. function b_clipTo(t,r,b,l){ 
83. if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l 
84. }else this.css.clip="rect("+t+","+r+","+b+","+l+")"; 
85. } 
86. function b_slideUp(ystop,moveby,speed,fn,wh){ 
87. if(!this.slideactive){ 
88. if(this.y>ystop){ 
89. this.moveIt(this.x,this.y-5); eval(wh) 
90. setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed) 
91. }else{ 
92. this.slideactive=false; this.moveIt(0,ystop); eval(fn) 
93. } 
94. } 
95. } 
96. function b_slideDown(ystop,moveby,speed,fn,wh){ 
97. if(!this.slideactive){ 
98. if(this.y<ystop){ 
99. this.moveIt(this.x,this.y+5); eval(wh) 
100. setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed) 
101. }else{ 
102. this.slideactive=false; this.moveIt(0,ystop); eval(fn) 
103. } 
104. } 
105. } 
106. function newsMenuInit(){ 
107. oTopMenu=new Array() 
108. zindex=10 
109. for(i=0;i<=nNumberOfMenus;i++){ 
110. oTopMenu[i]=new Array() 
111. oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i) 
112. oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i) 
113. oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i) 
114. oTopMenu[i][1].moveIt(0,nImageheight) 
115. oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0) 
116. if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop) 
117. else{ 
118. oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween)) 
119. oTopMenu[i][0].css.zIndex=zindex-- 
120. } 
121. oTopMenu[i][0].css.visibility="visible" 
122. } 
123. } 
124. function topMenu(num){ 
125. if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)') 
126. else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)') 
127. } 
128. function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)} 
129. function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)} 
130. onload=newsMenuInit; 
131. </script> 
132. <div id="divTopMenu0" class="clTopMenu" align="center" style="height: 170; left: 20; top: 20"><span class="css3"><a href="#" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)" onClick="topMenu(0); if(bw.dom || bw.ie4)this.blur(); return false">点击展开</a> 
133. </span>  
134. <div id="divTopMenuText0" class="clTopMenuText"> 
135. <span class="css3"> 
136. 鼠标点击后层展开JavaScript鼠标点击后层展开JavaScript。 
137. </span> 
138. </div> 
139. <div id="divTopMenuBottom0" class="clTopMenuBottom" style="top: 11; height: 10"></div> 
140. </div> 
141. </div> 
142. </body> 
143. </html> 

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