很酷的点击弹出层效果

╰半橙微兮° 2021-09-11 07:26 394阅读 0赞

<html>  
<head>  
<title>莫名苑CSS-很酷的点击弹出层效果</title>  
<meta http-equiv="content-Type" content="text/html;charset=gb2312">  
  
<style type="text/css">  
  
</style>  
<script language="javascript">  
  
</script>  
</head>  
<body>  
  
<div id="wrap">  
<div align="left" style="margin-bottom:3px">  
      <input type="button" id="showtop" οnclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="展开顶部"/>  
   <input type="button" id="hidetop" value="关闭顶部" οnclick="topslider.hide();this.style.display='none';document.getElementById('showtop').style.display='';" style="display:none"/>  
</div>  
<div id="topwrap">  
<div id="topcontainer" style="display:none"></div>  
</div>  
<div id="bodycontainer">  
    <div id="leftcontainer" style="display:none"><br />  
        <br />  
        <br />  
    </div>  
    <div align="left">  
      <input type="button" id="showleft" value="展开左侧" οnclick="leftslider.show();this.style.display='none';document.getElementById('hideleft').style.display='';"/>  
      <input type="button" id="hideleft" value="关闭左侧" οnclick="leftslider.hide();this.style.display='none';document.getElementById('showleft').style.display='';" style="display:none"/>  
    </div>  
</div>  
<div id="bottomcontainer"></div>  
</div>  
<script language="JavaScript" type="text/javascript">  
slider.names = new Array();  
function slider()  
\{  
this.id = slider.names.length;  
slider.names\[this.id\] = this;  
this.target = document.getElementById(arguments\[0\]); //第一个参数：被操作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";\} //循环完毕，清除循环定时  
\}  
//关于如何使用这个代码的说明：  
//上面的代码可以封装成为一个单独的js文件，然后包含在页面当中  
//然后使用下面的代码进行slider初始化，一个页面可以使用多个slider，下面的代码必须在页面底部</body>之前，否则可能会报错  
var topslider = new slider('topcontainer',2,80,734,20,2,20);  
var leftslider = new slider('leftcontainer',1,398,120,20,1,20);  
//参数分别代表的意义可以在代码顶端看到  
//控制slider动作可以使用两种方式  
//一种是使用下面声明的名字调用，比如topslider.show(),topslider.hide()  
//另一种可以使用slider.names\[0\].show(),slider.names\[0\].hide()，下标取决于slider初始化的顺序  
</script>  
</body>  
</html>  
内容转载自莫名苑([http://www.SJ98.com][http_www.SJ98.com]) 原文链接：[http://www.sj98.com/xwzj/wyzz/CSS/200811/2180.html][http_www.sj98.com_xwzj_wyzz_CSS_200811_2180.html]

[http_www.SJ98.com]: http://www.SJ98.com
[http_www.sj98.com_xwzj_wyzz_CSS_200811_2180.html]: http://www.sj98.com/xwzj/wyzz/CSS/200811/2180.html