105、弹出窗口的完全控制

105、弹出窗口的完全控制

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" onload="inithandle();" onunload="if (newwin!=null)newwin.close();">

<script language="JavaScript">

<!--

var newwin=null;

function inithandle() {

handle.style.left=(box.offsetWidth-handle.offsetWidth)/2+10;

handle.style.top=(box.offsetHeight-handle.offsetHeight)/2+10;

if (newwin!=null) newwin.moveTo((screen.Width-newwin.window.document.body.offsetWidth)/2,(screen.Height-newwin.window.document.body.offsetHeight)/2);

}

 

var url='http://www.cctv.com';

function openwin() {

inithandle();

if (newwin==null) {

newwin=window.open(url,'newwin','fullscreen=yes');openbutton.disabled=true;closebutton.disabled=false;}

var w=screen.Width/box.offsetWidth*handle.offsetWidth;

var h=screen.Height/box.offsetHeight*handle.offsetHeight;

newwin.resizeTo(w,h);

var l=(screen.Width-w)/2;

var t=(screen.Height-h)/2;

newwin.moveTo(l,t);

}

var dragenable=0;

var obj;

var dx0;

var dy0;

function dragstart(objname) {

obj=objname;

dragenable=1;

dx0=document.body.scrollLeft+event.clientX-obj.offsetLeft;

dy0=document.body.scrollTop+event.clientY-obj.offsetTop;

}

 

 

function draglayer() {

if (dragenable==1) {

obj.setCapture();

var x=document.body.scrollLeft+event.clientX-dx0;

var y=document.body.scrollTop+event.clientY-dy0;

       if (x>box.offsetLeft && x<box.offsetLeft+box.offsetWidth-obj.offsetWidth && y>box.offsetTop && y<box.offsetTop+box.offsetHeight-obj.offsetHeight) {

              obj.style.left=x;

              obj.style.top=y;

              }

       else if (x<box.offsetLeft) {

              obj.style.left=box.offsetLeft;

              if (y<box.offsetTop) {

                     obj.style.top=box.offsetTop;

                     }

              else if (y>box.offsetTop+box.offsetHeight-obj.offsetHeight) {

                     obj.style.top=box.offsetTop+box.offsetHeight-obj.offsetHeight;

                     }

              else {

                     obj.style.top=y;

                     }

              }

       else if (x>box.offsetLeft+box.offsetWidth-obj.offsetWidth) {

              obj.style.left=box.offsetLeft+box.offsetWidth-obj.offsetWidth;

              if (y<box.offsetTop) {

                     obj.style.top=box.offsetTop;

                     }

              else if (y>box.offsetTop+box.offsetHeight-obj.offsetHeight) {

                     obj.style.top=box.offsetTop+box.offsetHeight-obj.offsetHeight;

                     }

              else {

                     obj.style.top=y;

                     }

              }

       else {

              obj.style.left=x;

              if (y<box.offsetTop) {

                     obj.style.top=box.offsetTop;

                     }

              else if (y>box.offsetTop+box.offsetHeight-obj.offsetHeight) {

                     obj.style.top=box.offsetTop+box.offsetHeight-obj.offsetHeight;

                     }

              else {

                     obj.style.top=y;

                     }

              }

       if (newwin!=null)   {

              newwin.moveTo((obj.offsetLeft-10)*screen.Width/box.offsetWidth,(obj.offsetTop-10)*screen.Height/box.offsetHeight);

              }

       }

}

 

function dragend() {

dragenable=0;

obj.releaseCapture();

}

 

function changesize(zoomvalue) {

if (zoomvalue=='+' && handle.offsetWidth<200) {

       handle.style.pixelWidth+=4;

       handle.style.pixelHeight=handle.offsetWidth/box.offsetWidth*box.offsetHeight;

       }

if (zoomvalue=='-' && handle.offsetWidth>28) {

       handle.style.pixelWidth-=4;

       handle.style.pixelHeight=handle.offsetWidth/box.offsetWidth*box.offsetHeight;

       }

if (zoomvalue=='0') {

       handle.style.width=28;

       handle.style.height=21;

       }

if (newwin!=null)   {

       var w=screen.Width/box.offsetWidth*handle.offsetWidth;

       var h=screen.Height/box.offsetHeight*handle.offsetHeight;

       newwin.resizeTo(w,h);

       }

inithandle();

}

 

function setbg() {

if (newwin!=null)   {

       if(bgcolorvalue.value!='')       {newwin.document.body.style.backgroundColor="#"+bgcolorvalue.value;handle.style.backgroundColor="#"+bgcolorvalue.value;}

       newwin.document.body.style.backgroundImage='url('+bgimgvalue.value+')';

       }

}

 

function setborder() {

if (newwin!=null)   {

       if(bordercolorvalue.value!='')       {newwin.document.body.style.borderColor="#"+bordercolorvalue.value;handle.style.borderColor="#"+bordercolorvalue.value;}

       if(borderwidthvalue.value=='0')       {newwin.document.body.style.borderWidth=borderwidthvalue.value;handle.style.borderWidth=0;}

       else if(borderwidthvalue.value!='')       {newwin.document.body.style.borderWidth=borderwidthvalue.value;handle.style.borderWidth=1;}

       if(bordercolorvalue.value!='')       {newwin.document.body.style.borderStyle=borderstylevalue.value;handle.style.borderStyle=borderstylevalue.value;}

       }

}

 

function setmargin() {

if (newwin!=null)   {

       if(marginvalue.value!='')       {newwin.document.body.style.margin=marginvalue.value;}

       }

}

 

function setscroll() {

if (newwin!=null)   {

       if(checkscroll.checked) {newwin.document.body.scroll='yes';}

       else {newwin.document.body.scroll='no';}

       }

}

 

function setbgfix() {

if (newwin!=null)   {

       if(checkfix.checked) {newwin.document.body.style.backgroundAttachment='fixed';}

       else {newwin.document.body.style.backgroundAttachment='scroll';}

       }

}

 

function setbgrepeat() {

if (newwin!=null)   {

       if(checkrepeat.checked) {newwin.document.body.style.backgroundRepeat='no-repeat';}

       else {newwin.document.body.style.backgroundRepeat='repeat';}

       }

}

 

var trackrepeat;

function showtrack() {

handle.style.visibility='hidden';

trackbox.style.visibility='visible';

drawbox.style.visibility='visible';

}

 

function playtrack() {

handle.style.visibility='visible';

trackbox.style.visibility='hidden';

drawbox.style.visibility='hidden';

if (playtrackbutton.value=='Play Track') {showtrackbutton.disabled=true;playtrackbutton.value='Stop Track';playnode(axiscount2);}

else {clearTimeout(trackrepeat);showtrackbutton.disabled=false;playtrackbutton.value='Play Track';}

 

}

 

var axis=new Array();

var axiscount=0;

var axiscount2=0;

var drawenable=0;

var drawenable2=0;

 

function initnode() {

drawenable=1;

}

 

function drawnode() {

if (drawenable==1 && drawenable2==1) {

playtrackbutton.disabled=true;

       var tempx=document.body.scrollLeft+event.clientX-trackbox.offsetLeft;

       var tempy=document.body.scrollTop+event.clientY-trackbox.offsetTop;

       if (tempx>-1 && tempx<trackbox.offsetWidth-1 && tempy>-1 && tempy<trackbox.offsetHeight-1) {

              axis[axiscount]=tempx;

              axis[axiscount+1]=tempy;

              if (axiscount%4==0 && axiscount%20!=0)

              trackbox.innerHTML+='<img src=images/spacer.gif width=1 height=1 style="background-color:#999999;position:absolute;left:'+axis[axiscount]+';top:'+axis[axiscount+1]+'">';

              if (axiscount%20==0)

              trackbox.innerHTML+='<img src=images/spacer.gif width=2 height=2 style="background-color:#FF0000;position:absolute;left:'+axis[axiscount]+';top:'+axis[axiscount+1]+'">';

              axiscount+=2;

              trackbox.setCapture();

              }

       }

}

 

function playnode(i) {

if (i<axis.length) {

       handle.style.left=axis[i]-14+trackbox.offsetLeft;

       handle.style.top=axis[i+1]-11+trackbox.offsetTop;

       if (newwin!=null)   {

              newwin.moveTo((handle.offsetLeft-10)*screen.Width/box.offsetWidth,(handle.offsetTop-10)*screen.Height/box.offsetHeight);

              }

       axiscount2+=2;

       trackrepeat=setTimeout('playnode('+axiscount2+')',10);

       }

else {axiscount2=0;showtrackbutton.disabled=false;playtrackbutton.value='Play Track';clearTimeout(trackrepeat);}

}

 

function endnode() {

drawenable=0;

drawenable2=0;

drawbox.style.visibility='visible';

trackbox.releaseCapture();

playtrackbutton.disabled=false;

}

 

function cleartrack() {

axis=new Array();

axiscount=0;

drawbox.style.visibility='hidden';

drawenable2=1;

trackbox.innerHTML='';

}

// -->

</script>

<style>

.button2 { border:2px inset #FFFFFF}

.button { background-color:menu;border:2px outset #FFFFFF}

td,a,body,input {font-size:10px;font-family:Verdana}

</style>

<table width=220 cellspacing=0 cellpadding=0 border=0>

<tr>

<td height=170 align="center" class=button>

<table width="204" border="0" cellspacing="0" cellpadding="0" class=button2>

<tr>

<td valign="top" height="150">¡¡</td>

</tr>

</table></td></tr>

<tr>

<td align=center>

<input type="button" value="Open" onfocus="this.blur()" onclick="openwin()" style="width:100%" id=openbutton><br>

<input type="button" value="Close" onfocus="this.blur()" onclick="if (newwin!=null)newwin.close();" style="width:100%" id=closebutton disabled><br>

<input type="button" value="Size +" onfocus="this.blur()" onclick="changesize('+')" style="width:100%"><br>

<input type="button" value="Size -" onfocus="this.blur()" onclick="changesize('-')" style="width:100%"><br>

<input type="button" value="Restore" onfocus="this.blur()" onclick="changesize('0')" style="width:100%"><br>

</td>

</tr>

<tr>

<td align=center height=100 class=button valign="top">

<table width="100%" border="0" cellspacing="5" cellpadding="0">

<tr>

<td valign="top" width="50%">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td>

<fieldset>

<legend>Background</legend>

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td> Color</td><td><input type=textfield id=bgcolorvalue size=6 onkeypress="if (event.keyCode==13)setbg()" onblur="setbg()" value="666699"></td>

</tr>

<tr>

<td> Image</td><td><input type=textfield id=bgimgvalue size=6 onkeypress="if (event.keyCode==13)setbg()" onblur="setbg()"></td>

</tr>

<tr>

<td colspan=2><input type="checkbox" id="checkfix" value="checkbox" onclick="setbgfix()" onfocus="this.blur()"> Fix<input type="checkbox" id="checkrepeat" value="checkbox" onclick="setbgrepeat()" onfocus="this.blur()"> Tiled

</td>

</tr>

</table>

</fieldset>

<fieldset>

<legend>Margin</legend>

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td> Width</td><td><input type=textfield id=marginvalue size=6 onkeypress="if (event.keyCode==13)setmargin()" onblur="setmargin()" value=0></td>

</tr>

</table>

</fieldset>

</td>

</tr>

</table>

</td>

<td valign="top" width="50%">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td>

<fieldset>

<legend>Border</legend>

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td> Color</td><td><input type=textfield id=bordercolorvalue size=6 onkeypress="if (event.keyCode==13)setborder()" onblur="setborder()" value="666699"></td>

</tr>

<tr>

<td> Width</td><td><input type=textfield id=borderwidthvalue size=6 onkeypress="if (event.keyCode==13)setborder()" onblur="setborder()" value=0></td>

</tr>

<tr>

<td> Style</td><td><input type=textfield id=borderstylevalue size=6 onkeypress="if (event.keyCode==13)setborder()" onblur="setborder()" value=solid></td>

</tr>

</table>

</fieldset>

<fieldset>

<legend>Scroll</legend>

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td><input type="checkbox" id="checkscroll" value="checkbox" onclick="setscroll();" onfocus="this.blur()"> Scroll

</td>

</tr>

</table>

</fieldset>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align=center>

<input type="button" value="Show Track" onfocus="this.blur()" onclick="showtrack()" style="width:100%" id=showtrackbutton><br>

<input type="button" value="Play Track" onfocus="this.blur()" onclick="playtrack()" style="width:100%" id=playtrackbutton><br>

</td>

</tr>

</table>

<div id="box" style="position:absolute; width:200px; height:150px; z-index:1; left: 10px; top: 10px; background-color: #FFFFFF; border: 1px none #000000">

</div>

<div id="handle" style="font-size:5px;line-height:5px;position:absolute; width:28px; height:21px; z-index:2; left: 10px; top: 10px; background-color: #666699; border: 1px none #000000;cursor:move" onmousedown="dragstart(this)" onmousemove="draglayer()" onmouseup="dragend()"></div>

<div id="trackbox" style="position:absolute; width:172px; height:129px; z-index:1; left: 24px; top: 21px; border: 1px solid #EAEAEA; background-color: #FAFAFA; visibility: hidden" onmousemove=drawnode() onmousedown=initnode() onmouseup=endnode()>

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">

<tr>

<td align="center" style="color:#FF0000">(Empty)</td>

</tr>

</table>

</div>

<div id="drawbox" style="text-align:center;position:absolute; width:172px; height:14px; z-index:1; left: 24px; top: 136px; background-color: #CCCCCC; border: 1px none #EAEAEA; visibility: hidden; color: #FFFFFF" onclick="cleartrack()">ReDraw Track

</div>

Write a comment

Comments: 0