- <!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>
- <style>
- body {
- margin:0px
- }
- #Loading {
- position:absolute;
- z-index:10;
- left:10px;
- top:10px;
- border:1px #666666 solid;
- background:#eeeeee;
- width:10px;
- height:10px
- }
- </style>
- <script LANGUAGE="JavaScript">
- <!--
- /**
- *原本方法为$(){
- * return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
- * }
- */
- function getdiv(a){
- //return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);//网站上荡的源码
- return document.getElementById(a);//改装后的源码
- }
- var OverH,OverW,ChangeDesc,ChangeH=20,ChangeW=20;
- function OpenDiv(_Dw,_Dh,_Desc) {
- OverH=_Dh;
- OverW=_Dw;
- ChangeDesc=_Desc;
- getdiv("Loading").style.display='';
- //宽>长
- if(_Dw>_Dh){
- ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/20))
- }else if(_Dw<_Dh){//宽<长
- ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/20))
- }
- getdiv("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
- getdiv("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
- OpenNow()
- }
- var Nw=10,Nh=10;
- function OpenNow() {
- Nw=Nw+ChangeW;
- Nh=Nh+ChangeH;
- if(OverW>Nw||OverH>Nh) {
- if(OverW>Nw) {
- getdiv("Loading").style.width=Nw+"px";
- getdiv("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
- }
- if(OverH>Nh) {
- getdiv("Loading").style.height=Nh+"px";
- getdiv("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
- }
- window.setTimeout("OpenNow()",10)
- }else{
- Nw=10;
- Nh=10;
- ChangeH=20;
- ChangeW=20;
- getdiv("Loading").innerHTML=ChangeDesc;
- }
- }
- //-->
- </script>
- </head>
- <body>
- <a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
- <a href="javascript:OpenDiv(600,200,'层2<br>双击关闭')">层2 600*200</a><br><br>
- <a href="javascript:OpenDiv(200,600,'层3<br>双击关闭')">层3 200*600</a><br><br>
- <a href="javascript:OpenDiv(600,600,'层4<br>双击关闭')">层4 600*600</a>
- <div id="Loading" style="display:none" οndblclick="this.style.display='none'"></div>
- </body>
- </html>
Javascript弹出层的效果
最新推荐文章于 2017-10-13 17:36:00 发布