javascript 简单抽屉效果的实现代码


Posted in Javascript onMarch 09, 2010

css

<style type="text/css"> 
#bodycontainer 
{ 
height: 66px; 
} 
#leftcontainer 
{ 
background-color: #C5C5C5; 
float: left; 
border: 1px solid #C5C5C5; 
} 
</style>

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:
slider.names = new Array(); 
function slider() 
{ 
this.id = slider.names.length; 
slider.names[this.id] = this; 
this.target = document.getElementById(arguments[0].parentElement.parentElement.children[0].id); //第一个参数:被操作div的id 
this.direction = arguments[1];//第二个参数:div弹出的方向 
this.height = arguments[2];//第三个参数:div的高度 
this.width = arguments[3];//第四个参数:div的宽度 
this.step = arguments[4];//第五个参数:希望动作分解为几步完成 
this.timer = 10 * arguments[5];//第六个参数:每个动作的间隔时间,10ms为一个单位 
this.startopa = arguments[6];//第七个参数:div开始的透明度 
this.sparent = this.target.parentNode;//获取操作div的父容器 
this.intervalid = null;//循环定时的id 
this.i = 0;//循环的计数器 
this.status = 0;//slider层的状态:0-可以展开;1-不可以展开 
this.target.style.display = "none";//先将div隐去 
return this; 
} 
slider.prototype.initialize = function() 
{ 
this.sparent.style.overflow = "hidden";//设置父容器overflow 
this.target.style.width = Number(this.width) + 'px';//设置目标div的宽度 
this.target.style.height = Number(this.height) + 'px';//设置目标div的高度 
this.target.style.position = "";//设置目标div的定位方式 
this.target.style.display = "";//设置目标div的显示方式 
this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')';//设置目标div的透明度为初始透明度 
this.target.style.overflow = "hidden";//设置overflow 
switch(this.direction)//根据弹出方向设定div的margin 
{ 
case 1://left to right 
this.target.style.marginLeft = "-" + this.width + "px"; 
break; 
case 2://top to bottom 
this.target.style.marginTop = "-" + this.height + "px"; 
break; 
case 3://right to left 
this.target.style.marginRight = "-" + this.width + "px"; 
break; 
} 
} 
slider.prototype.show = function() 
{ 
if (this.status==0)//检查状态是否已经展开 
{ 
this.initialize();//操作div及其父容器的初始化 
this.intervalid = window.setInterval("slider.names["+this.id+"].cycle()",this.timer);//设置动作循环 
} 
} 
slider.prototype.hide = function() 
{ 
if (this.status==1)//检查状态是否已经展开 
{ 
this.intervalid = window.setInterval("slider.names["+this.id+"].decycle()",this.timer);//设置动作循环 
} 
} 
slider.prototype.cycle = function() //单步循环动作 
{ 
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值 
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5);//计算每步增加的透明度 
var nopa = Number(opa) + Number(opastep);//当前透明度 
if (nopa>100){this.target.style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值 
switch(this.direction)//根据弹出方向计算和设定div的动作 
{ 
case 1: //left to right 
var opx = this.target.style.marginLeft.split("px")[0]; 
var pxstep = Math.round((this.width / this.step)+0.5); 
var npx = Number(opx) + Number(pxstep); 
if (npx>0){this.target.style.marginLeft = '0px';}else{this.target.style.marginLeft = String(npx) + 'px';} 
break; 
case 2: //top to bottom 
var opx = this.target.style.marginTop.split("px")[0]; 
var pxstep = Math.round((this.height / this.step)+0.5); 
var npx = Number(opx) + Number(pxstep); 
if (npx>0){this.target.style.marginTop = '0px';}else{this.target.style.marginTop = String(npx) + 'px';} 
break; 
case 3: //right to left 
var opx = this.target.style.marginRight.split("px")[0]; 
var pxstep = Math.round((this.width / this.step)+0.5); 
var npx = Number(opx) + Number(pxstep); 
if (npx>0){this.target.style.marginRight = '0px';}else{this.target.style.marginRight = String(npx) + 'px';} 
break; 
} 
this.i++ //计数器+1 
if (this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;} //循环完毕,清除循环定时 
} 
slider.prototype.decycle = function() //单步循环动作 
{ 
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值 
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5)*2;//计算每步增加的透明度 
var nopa = Number(opa) - Number(opastep);//当前透明度 
if (nopa<this.startopa){this.target.style.filter = 'Alpha(opacity=' + this.startopa + ')';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值 
switch(this.direction)//根据弹出方向计算和设定div的动作 
{ 
case 1: //left to right 
var opx = this.target.style.marginLeft.split("px")[0]; 
var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5); 
var npx = Number(opx) - Number(pxstep); 
if (Math.abs(npx)>this.width+2){this.target.style.marginLeft = '-' + this.width + 'px';}else{this.target.style.marginLeft = String(npx) + 'px';} 
break; 
case 2: //top to bottom 
var opx = this.target.style.marginTop.split("px")[0]; 
var pxstep = Math.round((this.height / Math.round(this.step*0.5))+0.5); 
var npx = Number(opx) - Number(pxstep); 
if (Math.abs(npx)>this.height+2){this.target.style.marginTop = '-' + this.height + 'px';}else{this.target.style.marginTop = String(npx) + 'px';} 
break; 
case 3: //right to left 
var opx = this.target.style.marginRight.split("px")[0]; 
var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5); 
var npx = Number(opx) - Number(pxstep); 
if (Math.abs(npx)>this.width+2){this.target.style.marginRight = '-' + this.width + 'px';}else{this.target.style.marginRight = String(npx) + 'px';} 
break; 
} 
this.i++ //计数器+1 
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";} //循环完毕,清除循环定时 
}
Javascript 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
js操作滚动条事件实例
Jan 29 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
Javascript常考语句107条收集
Mar 09 #Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 #Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 #Javascript
JavaScript this调用规则说明
Mar 08 #Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 #Javascript
JavaScript中的闭包原理分析
Mar 08 #Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
window.open的功能全解析
2006/10/10 Javascript
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
python图像常规操作
2017/11/11 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python中p-value的实现方式
2019/12/16 Python
python如何求圆的面积
2020/07/01 Python
日语系毕业生推荐信
2013/11/11 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书