Este artigo descreve o método de implementação do efeito de arrasto JS Drag-On e amplificado. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "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> JS percebe o efeito de arrastamento da camada e também pode arrastar e aumentar o zoom </title>
<estilo>
*{margem: 0; preenchimento: 0;}
#zhezhao {
largura: 100%;
Altura: 100%;
Antecedentes:#f00;
filtro: alfa (opacidade: 0);
opacidade: 0;
Z-Index: 9999;
Posição: Absoluto;
topo: 0;
Esquerda: 0;
Exibir: Nenhum;
}
#div2 {
Largura: 200px;
Altura: 200px;
Posição: relativa;
Antecedentes: #eeeeee;
borda: 1px sólido #f00;
}
#div1 {
Largura: 15px;
Altura: 15px;
Antecedentes:#99CC00;
Posição: Absoluto;
Direita: 0px;
Inferior: 0px;
Cursor: NW-RESIZE;
estouro: oculto;
tamanho de fonte: 12px;
Alinhamento de texto: centro;
altura da linha: 15px;
Cor: #ffffff;
Float: Certo;
Z-Index: 3;
}
#certo{
Largura: 15px;
Altura: 100%;
Antecedentes:#f00;
Float: Certo;
Posição: Absoluto;
Direita: 0;
topo: 0;
Cursor: e-ressente;
estouro: oculto;
filtro: alfa (opacidade: 0);
opacidade: 0;
Z-Index: 1;
}
#fundo{
largura: 100%;
Altura: 15px;
Antecedentes:#f00;
Posição: Absoluto;
Esquerda: 0;
Inferior: 0;
Cursor: n-ressente;
estouro: oculto;
filtro: alfa (opacidade: 0);
opacidade: 0;
Z-Index: 1;
}
#div2 p {
preenchimento: 10px;
altura da linha: 24px;
Size da fonte: 13px;
Indente de texto: 24px;
Cor:#996600;
}
#div2 h2 {
largura: 100%;
Altura: 25px;
altura de linha: 25px;
Size da fonte: 14px;
Antecedentes:#CC9900;
Cor: #ffffff;
Indente de texto: 15px;
Cursor: Mova;
estouro: 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 à direita = document.getElementById ("direita");
var inferior = document.getElementById ("Bottom");
var mousestart = {};
var divStart = {};
var rightstart = {};
var Bottomstart = {};
// puxe para a direita
Right.onMousedown = função (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 ();
}
outro
{
document.addeventListener ("mousemove", Dodrag1, verdadeiro);
document.addeventListener ("mouseup", stopDrag1, true);
}
};
função 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;
}
caso contrário, if (w> document.documentElement.clientWidth-odiv2.offsetleft)
{
w = document.documentElement.clientWidth-ODIV2.OffSetLeft-2;
}
odiv2.style.width = w+"px";
};
função stopDrag1 ()
{
if (Right.releaseCapture)
{
Right.OnMousEMove = NULL;
Right.onMouseUp = null;
Right.releaseCapture ();
}
outro
{
Document.RemoveEventListener ("MouseMove", Dodrag1, True);
document.removeEventListener ("mouseup", stopDrag1, true);
}
};
// puxe para baixo
Bottom.onMousedown = função (EV)
{
var oevent = EV || Evento;
mousestart.x = oEvent.clientx;
mousestart.y = oevent.clienty;
Bottomstart.Y = Bottom.OffSettop;
if (Bottom.setCapture)
{
Bottom.onMousEmove = Dodrag2;
Bottom.onMouseUp = StopDrag2;
Bottom.setCapture ();
}
outro
{
document.addeventListener ("mousemove", Dodrag2, true);
document.addeventListener ("mouseup", stopDrag2, true);
}
};
função 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;
}
caso contrário, if (h> document.documentElement.clientHeight-odiv2.OffSettop)
{
h = document.documentElement.clientHeight-ODIV2.OffSetTop-2;
}
odiv2.style.Height = h+"px";
};
função stopDrag2 ()
{
if (Bottom.releaseCapture)
{
Bottom.OnMousEmove = NULL;
Bottom.onMouseUp = null;
Bottom.releaseCapture ();
}
outro
{
Document.RemoveEventListener ("MouseMove", Dodrag2, True);
Document.RemoveEventListener ("MouseUp", StopDrag2, True);
}
};
// pulse à esquerda e à direita ao mesmo tempo
odiv.onmousedown = função (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 ();
}
outro
{
document.addeventListener ("MouseMove", Dodrag, True);
document.addeventListener ("mouseup", stopdrag, true);
}
zhezhao.style.display = 'bloco';
};
função 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;
}
caso contrário, if (w> document.documentElement.clientWidth-odiv2.offsetleft)
{
w = document.documentElement.clientWidth-ODIV2.OffSetLeft-2;
}
if (h <odiv.offsetHeight)
{
h = odiv.offsetHeight;
}
caso contrário, if (h> document.documentElement.clientHeight-odiv2.OffSettop)
{
h = document.documentElement.clientHeight-ODIV2.OffSetTop-2;
}
odiv2.style.width = w+"px";
odiv2.style.Height = h+"px";
};
função stopDrag ()
{
if (odiv.releaseCapture)
{
odiv.onMousEMove = nulo;
odiv.onMouseUp = null;
odiv.releaseCapture ();
}
outro
{
Document.RemoveEventListener ("MouseMove", Dodrag, True);
Document.RemoveEventListener ("MouseUp", StopDrag, True);
}
zhezhao.style.display = 'nenhum';
};
// H2 arrasto perfeito
h2.onmousedown = função (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 ();
}
outro
{
document.addeventlistener ("mousemove", Dodrag3, true);
document.addeventListener ("mouseup", stopDrag3, true);
}
zhezhao.style.display = 'bloco';
};
função Dodrag3 (EV)
{
var oevent = EV || Evento;
var L = oEvent.clientX-mouseStart.x+divstart.x;
var t = oEvent.clienty-mousestart.y+divstart.y;
se (l <0)
{
l = 0;
}
caso contrário, if (l> document.documentElement.clientwidth-odiv2.offsetWidth)
{
l = document.documentElement.clientWidth-ODIV2.OffsetWidth;
}
se (t <0)
{
t = 0;
}
caso contrário, if (t> document.documentElement.clientHeight-odiv2.offSethEight)
{
t = document.documentElement.clientHeight-ODIV2.offsetheight;
}
odiv2.style.left = l+"px";
odiv2.style.top = t+"px";
};
função stopDrag3 ()
{
if (h2.releasecapture)
{
h2.onMousEMove = nulo;
h2.onmouseup = null;
h2.releasecapture ();
}
outro
{
Document.RemoveEventListener ("MouseMove", Dodrag3, True);
Document.RemoveEventListener ("MouseUp", StopDrag3, True);
}
zhezhao.style.display = 'nenhum';
}
};
</script>
</head>
<Body>
<div id = "div2">
<div>
<H2> arrasto perfeito </h2>
<p> Experimente a boa página da Web JavaScript. Além de arrastar, você também pode arrastar e aumentar, que é aumentado ou reduzido como uma janela do Windows. Basta pressionar e segurar o canto inferior direito da camada para aumentar ou diminuir o zoom. Se você quiser usá -lo, pode encapsular o JS no código em uma classe e provavelmente é mais razoável apresentá -lo de fora. '</p>
<div id = "direita"> </div>
<div id = "div1"> arrastar </div>
<div id = "Bottom"> </div>
</div>
</div>
<div id = "zhezhao"> </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.