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;

      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

{

      50px;

}

.main_table

{

      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;

      10px;

     height: 10px;

}

.LoadContent

{

      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=" 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>