Este artículo describe el método de implementación del efecto de arrastre de capa JS y amplificado. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> JS realiza el efecto de arrastre de capa, y también puede arrastrar y acercar </title>
<estilo>
*{margen: 0; relleno: 0;}
#zhezhao {
Ancho: 100%;
Altura: 100%;
Antecedentes:#F00;
Filtro: alfa (opacidad: 0);
Opacidad: 0;
Index Z: 9999;
Posición: Absoluto;
arriba: 0;
Izquierda: 0;
Pantalla: ninguno;
}
#div2 {
Ancho: 200px;
Altura: 200px;
Posición: relativo;
Antecedentes: #EEEEEE;
Border: 1px Solid #F00;
}
#Div1 {
Ancho: 15px;
Altura: 15px;
Antecedentes:#99CC00;
Posición: Absoluto;
Derecha: 0px;
Abajo: 0px;
Cursor: NW-Resize;
desbordamiento: oculto;
tamaño de fuente: 12px;
Text-Align: Center;
Línea de altura: 15px;
Color: #ffffff;
flotante: correcto;
Índice Z: 3;
}
#bien{
Ancho: 15px;
Altura: 100%;
Antecedentes:#F00;
flotante: correcto;
Posición: Absoluto;
Derecha: 0;
arriba: 0;
Cursor: resolución electrónica;
desbordamiento: oculto;
Filtro: alfa (opacidad: 0);
Opacidad: 0;
índice z: 1;
}
#abajo{
Ancho: 100%;
Altura: 15px;
Antecedentes:#F00;
Posición: Absoluto;
Izquierda: 0;
Abajo: 0;
cursor: n-rese;
desbordamiento: oculto;
Filtro: alfa (opacidad: 0);
Opacidad: 0;
índice z: 1;
}
#Div2 P {
relleno: 10px;
Línea-aguja: 24px;
tamaño de fuente: 13px;
Text-Indent: 24px;
Color:#996600;
}
#Div2 H2 {
Ancho: 100%;
Altura: 25px;
Línea de altura: 25px;
tamaño de fuente: 14px;
Antecedentes:#CC9900;
Color: #ffffff;
INDENT DE TEXTO: 15PX;
cursor: mover;
desbordamiento: oculto;
}
</style>
<script type = "text/javaScript">
Window.Onload = function ()
{
var odiv = document.getElementById ("div1");
var odiv2 = document.getElementById ("div2");
var zhezhao = document.getElementById ("Zhezhao");
var h2 = odiv2.getElementsBytagName ("H2") [0];
var right = document.getElementById ("Right");
var fondo = document.getElementById ("Bottom");
var mouseStart = {};
var divstart = {};
var rightStart = {};
var BottomStart = {};
// tirar a la derecha
Right.onMousEdown = function (EV)
{
var oevent = ev || evento;
mouseStart.x = oevent.clientx;
mouseStart.y = oevent.clienty;
rightStart.x = right.offsetleft;
if (right.setCapture)
{
right.onmousemove = doDrag1;
right.onmouseUp = stopDrag1;
Right.SetCapture ();
}
demás
{
document.AdDeventListener ("MouseMove", DoDrag1, verdadero);
document.addeventListener ("mouseup", stopdrag1, true);
}
};
Función DODRAG1 (EV)
{
var oevent = ev || evento;
var l = oevent.clientx-mouseStart.x+rightStart.x;
var w = l+odiv.offsetwidth;
if (w <odiv.offsetwidth)
{
w = Odiv.OffSetWidth;
}
else if (w> document.documentelement.clientwidth-doDiv2.OffsetLeft)
{
w = document.documentElement.ClientWidth-Odiv2.OffSetleft-2;
}
odiv2.style.width = w+"px";
};
función stopdrag1 ()
{
if (right.releaseCapture)
{
derecho.onmousemove = nulo;
right.onmouseUp = null;
right.RelEASECAPTure ();
}
demás
{
document.removeEventListener ("mouseMove", doDrag1, verdadero);
document.removeEventListener ("mouseup", stopdrag1, true);
}
};
//Derribar
fondo
{
var oevent = ev || evento;
mouseStart.x = oevent.clientx;
mouseStart.y = oevent.clienty;
BottomStart.y = Bottom.OffSettop;
if (Bottom.SetCapture)
{
Bottom.onmouseMove = doDraG2;
fondo.onmouseUp = stopDrag2;
Bottom.SetCapture ();
}
demás
{
document.AdDeventListener ("MouseMove", doDrag2, true);
document.addeventListener ("mouseup", stopdrag2, true);
}
};
Función DODRAG2 (EV)
{
var oevent = ev || evento;
var t = oevent.Clienty-MouseStart.y+BottomStart.y;
var h = t+odiv.offsetheight;
if (h <odiv.offsetheight)
{
h = odiv.offsetheight;
}
else if (h> document.documentelement.clientheight-doDiv2fsettop)
{
h = document.documentelement.clientHeight-Odiv2.Offsettop-2;
}
odiv2.style.height = h+"px";
};
función stopdrag2 ()
{
if (fondo.releaseCapture)
{
fondo.onmouseMove = nulo;
Bottom.onmouseUp = null;
Bottom.ReleaseCapture ();
}
demás
{
document.removeEventListener ("mouseMove", doDrag2, verdadero);
document.removeEventListener ("mouseup", stopdrag2, true);
}
};
// Pulse a la izquierda y a la derecha al mismo tiempo
odiv.onmousedown = function (ev)
{
var oevent = ev || evento;
mouseStart.x = oevent.clientx;
mouseStart.y = oevent.clienty;
divstart.x = odiv.offsetleft;
divstart.y = odiv.offsettop;
if (Odiv.SetCapture)
{
odiv.onmousemove = doDrag;
odiv.onmouseUp = stopDrag;
Odiv.SetCapture ();
}
demás
{
document.addeventListener ("MouseMove", DoDrag, True);
document.addeventListener ("mouseup", stopdrag, true);
}
zhezhao.style.display = 'bloque';
};
función DODRAG (EV)
{
var oevent = ev || evento;
var l = oevent.clientx-mouseStart.x+divstart.x;
var t = oevent.clienty-mouseStart.y+divstart.y;
var w = l+odiv.offsetwidth;
var h = t+odiv.offsetheight;
if (w <odiv.offsetwidth)
{
w = Odiv.OffSetWidth;
}
else if (w> document.documentelement.clientwidth-doDiv2.OffsetLeft)
{
w = document.documentElement.ClientWidth-Odiv2.OffSetleft-2;
}
if (h <odiv.offsetheight)
{
h = odiv.offsetheight;
}
else if (h> document.documentelement.clientheight-doDiv2fsettop)
{
h = document.documentelement.clientHeight-Odiv2.Offsettop-2;
}
odiv2.style.width = w+"px";
odiv2.style.height = h+"px";
};
Funcion StopDrag ()
{
if (Odiv.ReleaseCapture)
{
odiv.onmousemove = nulo;
odiv.onmouseup = null;
Odiv.ReleaseCapture ();
}
demás
{
document.removeEventListener ("mouseMove", doDrag, true);
document.removeEventListener ("mouseup", stopdrag, true);
}
zhezhao.style.display = 'none';
};
// H2 Perfecto arrastre
H2.onMousEdown = function (EV)
{
var oevent = ev || evento;
mouseStart.x = oevent.clientx;
mouseStart.y = oevent.clienty;
divstart.x = odiv2.offsetleft;
divstart.y = odiv2.offsettop;
if (h2.setCapture)
{
H2.onMouseMove = doDrag3;
H2.onMouseUp = stopDrag3;
H2.SetCapture ();
}
demás
{
document.addeventListener ("MouseMove", doDrag3, verdadero);
document.addeventListener ("mouseup", stopdrag3, true);
}
zhezhao.style.display = 'bloque';
};
Función DODRAG3 (EV)
{
var oevent = ev || evento;
var l = oevent.clientx-mouseStart.x+divstart.x;
var t = oevent.clienty-mouseStart.y+divstart.y;
if (l <0)
{
l = 0;
}
else if (l> document.documentelement.clientwidth-doDiv2.OffSetWidth)
{
l = document.documentelement.clientwidth-doDiv2.OffsetWidth;
}
if (t <0)
{
t = 0;
}
else if (t> document.documentelement.clientheight-doDiv2.offsetheight)
{
t = document.documentElement.clientHeight-Odiv2.Offsetheight;
}
odiv2.style.left = l+"px";
odiv2.style.top = t+"px";
};
función stopdrag3 ()
{
if (h2.releaseCapture)
{
H2.onMouseMove = nulo;
h2.onmouseup = nulo;
H2.ReleaseCapture ();
}
demás
{
document.removeEventListener ("mouseMove", doDrag3, verdadero);
document.removeEventListener ("mouseup", stopdrag3, true);
}
zhezhao.style.display = 'none';
}
};
</script>
</ablo>
<Body>
<div id = "div2">
<div>
<h2> Perfect Drag </h2>
<p> Experimente Good JavaScript Página web arrastre. Además de arrastrar, también puede arrastrar y ampliar, que se amplía o se reduce como una ventana de Windows. Simplemente mantenga presionada la esquina inferior derecha de la capa para acercarse o salir fácilmente. Si desea usarlo, puede encapsular el JS en el código en una clase, y probablemente sea más razonable presentarlo desde el exterior. '</p>
<div id = "Right"> </div>
<div id = "div1"> drag </div>
<div id = "fondo"> </div>
</div>
</div>
<div id = "zhezhao"> </div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.