js弹出遮罩层

最新推荐文章于 2024-02-18 02:37:57 发布

零度空间0520

最新推荐文章于 2024-02-18 02:37:57 发布

阅读量1k

点赞数

文章标签： div function string button input javascript

本文链接：https://blog.csdn.net/dududu01/article/details/6152097

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script>
function _(id) {
  return document.getElementById(id);
}
var ti = null ;
function loading(){
    var tmd = 0 ;
    var x1 = document.documentElement.clientWidth;
    var y1 = document.body.offsetHeight;
    var y2=document.documentElement.clientHeight;//整个页面的高度
    with (_("div1" )){
       style.width=x1+"px" ;
       if (y2>y1){
       style.height=y2+"px" ;
       }else {
       style.height=y1+"px" ;
       }
       style.overflowX="hidden" ;
       style.overflowY="hidden" ;
       style.visibility="visible" ;
    }
    _("div1" ).style.left=0 ;
    _("div1" ).style.filter='Alpha(Opacity=0)' ;
    document.body.style.overflowX="hidden" ;
    document.body.style.overflowY="hidden" ;
    _("div2" ).style.top=parseInt(document.documentElement.scrollTop)+((document.documentElement.clientHeight-250 )/2 )+"px" ;
    _("div2" ).style.left="50%" ;
    _("div2" ).style.marginLeft="-190px"
    _("div2" ).style.visibility="visible" ;
    ti = setInterval("hei()" ,10 );
}
var x = 0 ;
function hei(){
    x+=10 ;
    if (x<31 ){
        if (document.all){
            _("div1" ).style.filter='Alpha(Opacity=' +x+')' ;
        }else {
            _("div1" ).style.opacity="" +x/100 +"" ;
        }
    }
}
function unload(){
_("div1" ).style.visibility="hidden" ;
_("div2" ).style.visibility="hidden" ;
clearInterval(ti);
x=0 ;
}
</script>
<style>
*{
    padding: 0 ;
     margin: 0 ;
}
div{
background-color:#fff;
}
#div1{
position:absolute;
visibility:hidden;
filter:alpha(opacity=70 );
background-color:#a6a6a6;
z-index:9 ;
}
#div2{
position:absolute;
width:371 px;
height:auto;
border:2 px #aeddf1 solid;
visibility:hidden;
left:expression((body.clientWidth-300 )/2 );
background-color:#CCCCCC;
text-align:center;
z-index:10 ;
}
#top{
background-color:#eef7fe;
height:23 px;
border-bottom:1 px #aedef2 solid;
text-align:right;
}
</style>
</head>
<body>
<div id="div1" align="center" ></div>
<div id="div2" >
    <div id="top" ><img src="http://www.wotuitui.com/images/close.gif" style="cursor:hand;" onClick="unload();" alt="点击关闭" /></div>
<div><br/><br/><br/>内容<br/><br/><br/><br/><br/></div>
</div>
<a href="javascript:loading();" >打开</a>
</body>
</html>

2.22222

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动效果类</title>
<STYLE>
body {
background-color: #EEEEEE;
margin: 0px;
text-align: center;
}
#wrap {
width: 736px;
background-color: #FFFFFF;
overflow: hidden;
margin: 12px;
padding: 12px;
}
#topcontainer {
height: 80px;
width: 732px;
background-color: #99FF66;
border: 1px solid #79F200;
}
#bodycontainer {
height: 400px;
width: 100%;
margin-top: 12px;
}
#bottomcontainer {
height: 60px;
width: 100%;
margin-top: 12px;
}
#topwrap {
width: 100%;
}
#leftcontainer {
background-color: #99FF66;
height: 400px;
width: 120px;
float: left;
border: 1px solid #79F200;
}
input {
background-color: #99FF66;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #79F200;
border-right-color: #79F200;
border-bottom-color: #79F200;
border-left-color: #79F200;
line-height: 28px;
background-position: center;
height: 30px;
}
</STYLE>
</head>
<body>
<br />
<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>

<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>