Js实现窗口的的显示和拖动

Js代码：

<script type="text/javascript">

var prox;

var proy;

var proxc;

var proyc;

function show(id){

clearInterval(prox);

clearInterval(proy);

clearInterval(proxc);

clearInterval(proyc);

var o = document.getElementByIdx_x(id);

o.style.display = "block";

o.style.width = "1px";

o.style.height = "1px";

prox = setInterval(function(){openx(o,280)},10);

}

function openx(o,x){

var cx = parseInt(o.style.width);

if(cx < x)

{

o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";

}

else

{

clearInterval(prox);

proy = setInterval(function(){openy(o,350)},10);

}

}

function openy(o,y){

var cy = parseInt(o.style.height);

if(cy < y)

{

o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";

}

else

{

clearInterval(proy);

}

}

function closeed(id){

clearInterval(prox);

clearInterval(proy);

clearInterval(proxc);

clearInterval(proyc);

var o = document.getElementByIdx_x(id);

if(o.style.display == "block")

{

proyc = setInterval(function(){closey(o)},10);

}

}

function closey(o){

var cy = parseInt(o.style.height);

if(cy > 0)

{

o.style.height = (cy - Math.ceil(cy/5)) +"px";

}

else

{

clearInterval(proyc);

proxc = setInterval(function(){closex(o)},10);

}

}

function closex(o){

var cx = parseInt(o.style.width);

if(cx > 0)

{

o.style.width = (cx - Math.ceil(cx/5)) +"px";

}

else

{

clearInterval(proxc);

o.style.display = "none";

}

}

var od = document.getElementByIdx_x("fd");

var on = document.getElementByIdx_x("on");

var dx,dy,mx,my,mouseD;

var odrag;

var isIE = document.all ? true : false;

document.onmousedown = function(e){

var e = e ? e : event;

if(e.button == (document.all ? 1 : 0))

{

mouseD = true;

}

}

document.onmouseup = function(){

mouseD = false;

odrag = "";

if(isIE)

{

od.releaseCapture();

od.filters.alpha.opacity = 100;

}

else

{

window.releaseEvents(on.MOUSEMOVE);

od.style.opacity = 1;

}

}

//function readyMove(e){

on.onmousedown = function(e){

odrag = this;

var e = e ? e : event;

if(e.button == (document.all ? 1 : 0))

{

mx = e.clientX;

my = e.clientY;

od.style.left = od.offsetLeft + "px";

od.style.top = od.offsetTop + "px";

if(isIE)

{

od.setCapture();

od.filters.alpha.opacity = 50;

}

else

{

window.captureEvents(Event.MOUSEMOVE);

od.style.opacity = 0.5;

}

//alert(mx);

//alert(my);

}

}

document.onmousemove = function(e){

var e = e ? e : event;

//alert(mrx);

//alert(e.button);

if(mouseD==true && odrag)

{

var mrx = e.clientX - mx;

var mry = e.clientY - my;

od.style.left = parseInt(od.style.left) +mrx + "px";

od.style.top = parseInt(od.style.top) + mry + "px";

mx = e.clientX;

my = e.clientY;

}

}

</script>

需要在css中设置一些属性，所以这里用到了css样式

Style.css

body

{

font-family: Arial;

font-size: 12px;

background-color: #F4FBFF;

margin: 0px;

color: #003F7B;

overflow-x: hidden;

scrollbar-face-color: #E6F2FD;

scrollbar-highlight-color: #1678B2;

scrollbar-shadow-color: #1678B2;

scrollbar-3dlight-color: #F1F9FF;

scrollbar-arrow-color: #006699;

scrollbar-track-color: #E6F2FD;

scrollbar-darkshadow-color: #F1F9FF;

}

td

{

font-family: Arial;

font-size: 12px;

}

th

{

font-family: Arial;

font-size: 12px;

}

p

{

margin: 0px;

padding: 0px;

}

.input_on{

font-size: 12px;

font-family: "Arial";

color: #004282;

line-height: 15px;

padding: 2px;

background-color: #E6F2FD;

border: 1px solid #075198;

}

.input

{

font-size: 12px;

font-family: "Arial";

color: #004282;

line-height: 15px;

padding: 2px;

background-color: #ffffff;

border: 1px solid #075198;

}

.bt

{

background-color: #FFFFFF;

color: #075198;

font-family: "verdana";

font-size: 12px;

border: 1px solid #4D85BA;

cursor: pointer;

line-height: 19px;

background-image: url('bt_bg.gif');

background-repeat: repeat-x;

background-position: 50% top;

font-weight: bold;

}

.select

{

font-size: 12px;

font-family: "verdana";

color: #003567;

background-color: #ffffff;

width: 100%;

margin: 1px;

line-height: 25px;

}

a:link

{

color: #003F7B;

text-decoration: none;

}

a:visited

{

color: #003F7B;

text-decoration: none;

}

a:hover

{

color: #FF4800;

text-decoration: none;

font-weight: normal;

}

form

{

margin: 0px;

padding: 0px;

}

#add_table ._help

{

font-size: 12px;

color: #BEBEBE;

}

.drw_list

{

width: 50px;

}

.main_table

{

width: 100%;

padding: 2px;

border: solid 1px #C4D8ED;

}

.td_title

{

height: 25px;

line-height: 25px;

background: #EEF7FD;

color: #135294;

font-weight: bold;

}

.td_on

{

background: #fafafa;

}

.td_off

{

background: #EEF7FD;

}

#fd

{

background: #EDF1F8;

border: 2px solid #849BCA;

margin-top: 2px;

margin-right: 2px;

float: left;

overflow: hidden;

position: absolute;

left: 400px;

top: 200px;

font-size: ccursor:move;

float: right;

filter: alpha(opacity=100);

}

#Loading

{

position: absolute;

z-index: 10;

left: 10px;

top: 10px;

width: 10px;

height: 10px;

}

.LoadContent

{

width: 100%;

height: 100%;

overflow: auto;

}

.pages

{

color: #999;

}

.pages a, .pages .cpb

{

text-decoration: none;

float: left;

padding: 0 5px;

border: 1px solid #075198;

background: #ffff;

margin: 0 2px;

font-size: 11px;

color: #000;

}

.pages a:hover

{

background-color: #075198;

color: #fff;

border: 1px solid #075198;

text-decoration: none;

}

.pages .cpb

{

font-weight: bold;

color: #fff;

background: #075198;

border: 1px solid #075198;

}

页面调用

<div id="fd" style="display:none; background-color:red">

<div id="on" style="width: 100%; filter: alpha(opacity=100); opacity: 1; height: 30px;

vertical-align: middle; background-color: #336699">

<font color="#FFFFFF"><b>上传栏目图片操作<a href="#" style="float: right; color: #FFFFFF;"

onclick="closeed('fd');return false;">[关闭]</a></b></font></div>

要显示的层

</div>

<a href="#" onclick="show('fd');return false">打开</a>