JavaScript-Methode zum Implementieren einer Animation zum Öffnen transparenter Eingabeaufforderungsebenen_javascript-Fähigkeiten-js-Tutorial-php.cn

JavaScript-Methode zum Implementieren einer Animation zum Öffnen transparenter Eingabeaufforderungsebenen_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:02:56

Original

1136 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von JavaScript, um das Öffnen einer durchscheinenden Eingabeaufforderungsebene zu animieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM半透明提示层</title>
<style type="text/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;
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
<a href="#" class="od" onclick = "show('fd');return false;">
[打开层]
</a>
<a href="#" class="od" onclick = "closeed('fd');return false;">
[关闭层]
</a>
</div>
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>
<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.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 &#63; true : false;
document.onmousedown = function(e){
var e = e &#63; e : event;
if(e.button == (document.all &#63; 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 &#63; e : event;
if(e.button == (document.all &#63; 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 &#63; 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/>
<div>http://www.jb51.net/</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.