浮动的变色层

下面为效果显示！

脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
.clWin{position:absolute; z-index:2; visibility:hidden; overflow:hidden; background-color:blue}
.clWindow{position:absolute; background-color:blue; overflow:hidden; z-index:15; width:200}
.clWinHead{position:absolute; width:200; top:0; font-family:arial,arial,helvetica; font-size:11px; font-weight:bold; color:white; background-color:transparent}
.clText{position:absolute; z-index:50; font-family:arial,helvetica; font-size:11px; background-color:transparent}
.clWinResize{position:absolute; z-index:30; width:30; height:30; clip:rect(0,30,30,0); background-image:url(resize.gif); layer-background-image:url(resize.gif)}
.clLogo{position:absolute}
.clUp{position:absolute; width:12; height:12; z-index:60;}
.clDown{position:absolute; width:12; height:12; z-index:60;}
.clWinButtons{position:absolute; font-family:arial,helvetica; font-size:12px} 
</style>
<script language="JavaScript" type="text/javascript">

function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck()

var oWin=new Array; oWin.zIndex=10; oWin.dragobj=-1; oWin.resizeobj=-1; oWin.zIndex=100
//Start Variables to set ******************************************************************

//This script works in IE4+, NS4+ and Opera5. 
//Just remember that NS4 and Opera5 does not reflow the content when you resize the windows.

oWin.bordercolor="#935591" //Remember that you have to change the images as well if you change this color
oWin.bgcolor="red" //Default background color
oWin.bgcoloron="blue"  //The "active" background color
oWin.bgscroll="#C1A9C0" //The background-color for the scroll area"

//The rest of the style variables have to be set in the stylesheet above. 
//To change styles on the text change .clText

//If you change these variables I assume you would like to change the images, image sizes and the imagemap for 
//the windows. If so you'll have to do that manually in the addWindow function for now.

oWin.bottomh=10 //The height of the bottom "border"
oWin.headh=15 //The height of the head "border"
oWin.bordersize=1 //The left and right bordersize
oWin.scrollw=13 //The width of the scroll area
oWin.scrollimgh=12 //The width of the scroll images
oWin.buttonsw=39 //The width of the buttons image
oWin.resizeh=9 //The width of the resize img
oWin.resizew=13 //The height of the resize img

oWin.starty=5 //If you have a header or something on the page that you want the setWindows and the dragdrop to care about set it here.
oWin.defwidth=200 //Default width for the windows if nothing is spesified
oWin.defheight=200 //Default height for the windows if nothing is spesified
oWin.between=15 //This variable controls how much space there will be between the windows when you use setWindows

//Set this variable to 1 if you want to be able to control the area the windows can be scrolled.
oWin.keepinside=0 //VALUE: 1 || 0
	oWin.maxX=500 //This is the maximum X value the windows can go to. Set this to "winpage.x2" to keep them inside the window. VALUE: "winpage.x2" || px
	oWin.maxY=500 //This is the maximum Y value the windows can go to. Set this to "winpage.y2" to keep them inside the window. VALUE: "winpage.y2" || px
	oWin.minX=50 //This is the minimun X value the windows can go to. Set to 0 to keep them inside the window. VALUE: px
	oWin.minY=50 //This is the minimum Y value the windows can go to. Set to 0 to keep them inside the window. VALUE: px

//In the next version of this script all variables can be set on each individual window as well

//End Variables to set ********************************************************************

function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
	this.ie4=(document.all && !this.dom)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck(); 
//Uncomment the next line if you want the user to be sent to another page if he's using an old browser
//if(!bw.bw) location.href='sorry.html'

cn2="<h3>This is content!</h3>So is this.<br><br>More content is coming right up!<br>More content is coming right up! More content is coming right up!<br><br><br>More content is coming right up! More content is coming right up!"
addWindow("Test window 2",cn2,100,100,250,300,"green","silver")

//String - With all variables
addWindow("Test window 1","My - content - my - content - my content",300,150,100,200)
</script>