學習啦 > 學習電腦 > 電腦硬件知識 > 鍵盤鼠標 > JavaScript怎么實現鼠標點擊后層展開效果

JavaScript怎么實現鼠標點擊后層展開效果

時間： 沈迪豪908由 分享

JavaScript怎么實現鼠標點擊后層展開效果

　　愛學習的小伙伴們，你們知道JavaScript實現鼠標點擊后層展開效果的方法嗎?不知道的話跟著學習啦小編一起來學習JavaScript實現鼠標點擊后層展開效果吧。

　 JavaScript實現鼠標點擊后層展開效果的詳細代碼

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

猜你喜歡：

1.html調用js方法

2.id調用js方法

3.怎么用js實現簡單鼠標跟隨效果

4.lol上單JS強勢來襲

5.使用js實現鼠標點擊變色

6.js中構造函數是什么

7.JavaScript和JSP的區(qū)別

1951490