css
复制代码 代码如下:
body, span, div, td { font-size:12px; line-height:1.5em; color:#849bca; }
#bodyl { float:left; width:84px; margin-right:2px; }
a.od { width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849bca; display:block; color:#547bc9; float:left; text-decoration:none; margin-top:2px; }
a.od:link { background:#eef1f8; }
a.od:visited { background:#eef1f8; }
a.od:hover { background:#eee; }
a.od:active { background:#eee; }
#fd { width:500px; height:200px; background:#edf1f8; border: 2px solid #849bca; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left;/*filter:alpha(opacity=50);*/ }
.content { padding:10px; }
html
复制代码 代码如下:
[打开层]
[关闭层]
移动层
jq
复制代码 代码如下:
var prox;
var proy;
var proxc;
var proyc;
function show(id){/*--打开--*/
clearinterval(prox);
clearinterval(proy);
clearinterval(proxc);
clearinterval(proyc);
var o = document.getelementbyid(id);
o.style.display = block;
o.style.width = 1px;
o.style.height = 1px;
prox = setinterval(function(){openx(o,500)},10);
}
function openx(o,x){/*--打开x--*/
var cx = parseint(o.style.width);
if(cx {
o.style.width = (cx + math.ceil((x-cx)/5)) +px;
}
else
{
clearinterval(prox);
proy = setinterval(function(){openy(o,200)},10);
}
}
function openy(o,y){/*--打开y--*/
var cy = parseint(o.style.height);
if(cy {
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.getelementbyid(id);
if(o.style.display == block)
{
proyc = setinterval(function(){closey(o)},10);
}
}
function closey(o){/*--打开y--*/
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){/*--打开x--*/
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.getelementbyid(fd);
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(od.mousemove);
od.style.opacity = 1;
}
}
//function readymove(e){
od.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;
}
}