android js 开屏动画,JS打开层/关闭层/移动层动画效果的实例代码

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 < x)

{

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 < 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.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;

}

}