[查看演示] 源码如下
----------------------------------------------------------
<!--Design by Myhyli //-->
<html>
<head>
<title>Crazy Window－www.51windows.Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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='temp.htm';
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>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" onload="inithandle();" onunload="if (newwin!=null)newwin.close();">
<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>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> |
