简单抽屉效果的实现
CSS:
<style type="text/css">
#bodycontainer
{
height: 66px;
}
#leftcontainer
{
background-color: #C5C5C5;
float: left;
border: 1px solid #C5C5C5;
}
</style>
<script src="js/slider.js" type="text/javascript"></script>
aspx:
<div id="bodycontainer">
<div id="leftcontainer+<%#Container.ItemIndex+1 %>" style="display:none;">
<%#hiSoft.AMS.BLL.BAssetAlteration.getActionLinksString(Eval("ID"), g_Sites, g_Permission)%>
</div>
<div>
<img title="show" alt="open" src="Images/x16.gif" id="showleft+<%#Container.ItemIndex+1 %>" onclick="var leftslider = new slider(this,1,50,85,20,1,20);leftslider.show();this.style.display='none';Show(this);"/>
<script type="text/javascript">
function Show(a) {
//a.style.display = 'none';
document.getElementById(a.parentElement.children[2].id).style.display = '';
}
</script>
<img title="hidden" alt="close" src="Images/x16.gif" id="hideleft+<%#Container.ItemIndex+1 %>" onclick="var leftslider = new slider(this,1,50,85,20,1,20);leftslider.hide();this.style.display='none';document.getElementById(this.parentElement.children[0].id).style.display='';" style="display:none " />
</div>
</div>
slider.js:
代码
1
slider.names
=
new
Array();
2
function
slider()
3
{
4
this
.id
=
slider.names.length;
5
slider.names[
this
.id]
=
this
;
6
this
.target
=
document.getElementById(arguments[
0
].parentElement.parentElement.children[
0
].id);
//
第一个参数：被操作div的id
7
this
.direction
=
arguments[
1
];
//
第二个参数：div弹出的方向
8
this
.height
=
arguments[
2
];
//
第三个参数：div的高度
9
this
.width
=
arguments[
3
];
//
第四个参数：div的宽度
10
this
.step
=
arguments[
4
];
//
第五个参数：希望动作分解为几步完成
11
this
.timer
=
10
*
arguments[
5
];
//
第六个参数：每个动作的间隔时间，10ms为一个单位
12
this
.startopa
=
arguments[
6
];
//
第七个参数：div开始的透明度
13
this
.sparent
=
this
.target.parentNode;
//
获取操作div的父容器
14
this
.intervalid
=
null
;
//
循环定时的id
15
this
.i
=
0
;
//
循环的计数器
16
this
.status
=
0
;
//
slider层的状态：0-可以展开；1-不可以展开
17
this
.target.style.display
=
"
none
"
;
//
先将div隐去
18
return
this
;
19
}
20
slider.prototype.initialize
=
function
()
21
{
22
this
.sparent.style.overflow
=
"
hidden
"
;
//
设置父容器overflow
23
this
.target.style.width
=
Number(
this
.width)
+
'
px
'
;
//
设置目标div的宽度
24
this
.target.style.height
=
Number(
this
.height)
+
'
px
'
;
//
设置目标div的高度
25
this
.target.style.position
=
""
;
//
设置目标div的定位方式
26
this
.target.style.display
=
""
;
//
设置目标div的显示方式
27
this
.target.style.filter
=
'
Alpha(opacity=
'
+
Number(
this
.startopa)
+
'
)
'
;
//
设置目标div的透明度为初始透明度
28
this
.target.style.overflow
=
"
hidden
"
;
//
设置overflow
29
switch
(
this
.direction)
//
根据弹出方向设定div的margin
30
{
31
case
1
:
//
left to right
32
this
.target.style.marginLeft
=
"
-
"
+
this
.width
+
"
px
"
;
33
break
;
34
case
2
:
//
top to bottom
35
this
.target.style.marginTop
=
"
-
"
+
this
.height
+
"
px
"
;
36
break
;
37
case
3
:
//
right to left
38
this
.target.style.marginRight
=
"
-
"
+
this
.width
+
"
px
"
;
39
break
;
40
}
41
}
42
slider.prototype.show
=
function
()
43
{
44
if
(
this
.status
==
0
)
//
检查状态是否已经展开
45
{
46
this
.initialize();
//
操作div及其父容器的初始化
47
this
.intervalid
=
window.setInterval(
"
slider.names[
"
+
this
.id
+
"
].cycle()
"
,
this
.timer);
//
设置动作循环
48
}
49
}
50
slider.prototype.hide
=
function
()
51
{
52
if
(
this
.status
==
1
)
//
检查状态是否已经展开
53
{
54
this
.intervalid
=
window.setInterval(
"
slider.names[
"
+
this
.id
+
"
].decycle()
"
,
this
.timer);
//
设置动作循环
55
}
56
}
57
slider.prototype.cycle
=
function
()
//
单步循环动作
58
{
59
var
opa
=
this
.target.style.filter.split(
"
=
"
)[
1
].split(
"
)
"
)[
0
]
//
获取目标div的透明度数值
60
var
opastep
=
Math.round(((
100
-
Number(opa))
/
this
.step)
+
2.5
);
//
计算每步增加的透明度
61
var
nopa
=
Number(opa)
+
Number(opastep);
//
当前透明度
62
if
(nopa
>
100
){
this
.target.style.filter
=
'
Alpha(opacity=100)
'
;}
else
{
this
.target.style.filter
=
'
Alpha(opacity=
'
+
String(nopa)
+
'
)
'
;}
//
给div透明度赋值
63
switch
(
this
.direction)
//
根据弹出方向计算和设定div的动作
64
{
65
case
1
:
//
left to right
66
var
opx
=
this
.target.style.marginLeft.split(
"
px
"
)[
0
];
67
var
pxstep
=
Math.round((
this
.width
/
this
.step)
+
0.5
);
68
var
npx
=
Number(opx)
+
Number(pxstep);
69
if
(npx
>
0
){
this
.target.style.marginLeft
=
'
0px
'
;}
else
{
this
.target.style.marginLeft
=
String(npx)
+
'
px
'
;}
70
break
;
71
case
2
:
//
top to bottom
72
var
opx
=
this
.target.style.marginTop.split(
"
px
"
)[
0
];
73
var
pxstep
=
Math.round((
this
.height
/
this
.step)
+
0.5
);
74
var
npx
=
Number(opx)
+
Number(pxstep);
75
if
(npx
>
0
){
this
.target.style.marginTop
=
'
0px
'
;}
else
{
this
.target.style.marginTop
=
String(npx)
+
'
px
'
;}
76
break
;
77
case
3
:
//
right to left
78
var
opx
=
this
.target.style.marginRight.split(
"
px
"
)[
0
];
79
var
pxstep
=
Math.round((
this
.width
/
this
.step)
+
0.5
);
80
var
npx
=
Number(opx)
+
Number(pxstep);
81
if
(npx
>
0
){
this
.target.style.marginRight
=
'
0px
'
;}
else
{
this
.target.style.marginRight
=
String(npx)
+
'
px
'
;}
82
break
;
83
}
84
this
.i
++
//
计数器+1
85
if
(
this
.i
>
(
this
.step
-
1
)){window.clearInterval(
this
.intervalid);
this
.i
=
0
;
this
.status
=
1
;}
//
循环完毕，清除循环定时
86
}
87
slider.prototype.decycle
=
function
()
//
单步循环动作
88
{
89
var
opa
=
this
.target.style.filter.split(
"
=
"
)[
1
].split(
"
)
"
)[
0
]
//
获取目标div的透明度数值
90
var
opastep
=
Math.round(((
100
-
Number(opa))
/
this
.step)
+
2.5
)
*
2
;
//
计算每步增加的透明度
91
var
nopa
=
Number(opa)
-
Number(opastep);
//
当前透明度
92
if
(nopa
<
this
.startopa){
this
.target.style.filter
=
'
Alpha(opacity=
'
+
this
.startopa
+
'
)
'
;}
else
{
this
.target.style.filter
=
'
Alpha(opacity=
'
+
String(nopa)
+
'
)
'
;}
//
给div透明度赋值
93
switch
(
this
.direction)
//
根据弹出方向计算和设定div的动作
94
{
95
case
1
:
//
left to right
96
var
opx
=
this
.target.style.marginLeft.split(
"
px
"
)[
0
];
97
var
pxstep
=
Math.round((
this
.width
/
Math.round(
this
.step
*
0.5
))
+
0.5
);
98
var
npx
=
Number(opx)
-
Number(pxstep);
99
if
(Math.abs(npx)
>
this
.width
+
2
){
this
.target.style.marginLeft
=
'
-
'
+
this
.width
+
'
px
'
;}
else
{
this
.target.style.marginLeft
=
String(npx)
+
'
px
'
;}
100
break
;
101
case
2
:
//
top to bottom
102
var
opx
=
this
.target.style.marginTop.split(
"
px
"
)[
0
];
103
var
pxstep
=
Math.round((
this
.height
/
Math.round(
this
.step
*
0.5
))
+
0.5
);
104
var
npx
=
Number(opx)
-
Number(pxstep);
105
if
(Math.abs(npx)
>
this
.height
+
2
){
this
.target.style.marginTop
=
'
-
'
+
this
.height
+
'
px
'
;}
else
{
this
.target.style.marginTop
=
String(npx)
+
'
px
'
;}
106
break
;
107
case
3
:
//
right to left
108
var
opx
=
this
.target.style.marginRight.split(
"
px
"
)[
0
];
109
var
pxstep
=
Math.round((
this
.width
/
Math.round(
this
.step
*
0.5
))
+
0.5
);
110
var
npx
=
Number(opx)
-
Number(pxstep);
111
if
(Math.abs(npx)
>
this
.width
+
2
){
this
.target.style.marginRight
=
'
-
'
+
this
.width
+
'
px
'
;}
else
{
this
.target.style.marginRight
=
String(npx)
+
'
px
'
;}
112
break
;
113
}
114
this
.i
++
//
计数器+1
115
if
(
this
.i
>
(Math.round(
this
.step
*
0.5
)
-
1
)){window.clearInterval(
this
.intervalid);
this
.i
=
0
;
this
.status
=
0
;
this
.target.style.display
=
"
none
"
;}
//
循环完毕，清除循环定时
116
}
117