JavaScript实现动画打开半透明提示层的方法

更新时间：2026-02-18 19:34:28作者：zhao

本文实例讲述了JavaScript实现动画打开半透明提示层的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DOM半透明提示层</title>

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;

}

.content{

padding:10px;

}

</style>

</head>

<body>

[打开层]

</a>

[关闭层]

</a>

</div>

</div>

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;

}

</script><br/>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。