今天看啥
热点:

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" 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>

</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>

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

www.bkjia.comtruehttp://www.bkjia.com/Javascript/1000178.htmlTechArticleJavaScript实现鼠标点击后层展开效果的方法 本文实例讲述了JavaScript实现鼠标点击后层展开效果的方法。分享给大家供大家参考。具体分析如...

相关文章

相关搜索: JavaScript 鼠标

帮客评论

视觉看点