简单抽屉效果的实现

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 %>" οnclick="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 %>"  οnclick="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

转载于:https://www.cnblogs.com/pfs1314/archive/2010/03/09/1681662.html