Dieser Artikel beschreibt die Implementierungsmethode von JS Drag-on und verstärkten Schichtwiderstandseffekt. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" />
<titels> JS realisiert den Schlepperffekt der Ebenenschlepper und kann auch in </title> ziehen und zoomen können
<Styles>
*{Margin: 0; Polster: 0;}
#zhezhao {
Breite: 100%;
Höhe: 100%;
Hintergrund:#f00;
Filter: Alpha (Deckkraft: 0);
Deckkraft: 0;
Z-Index: 9999;
Position: absolut;
Top: 0;
links: 0;
Anzeige: Keine;
}
#div2 {
Breite: 200px;
Höhe: 200px;
Position: Relativ;
Hintergrund: #eeeeeee;
Grenze: 1PX Solid #f00;
}
#div1 {
Breite: 15px;
Höhe: 15px;
Hintergrund:#99CC00;
Position: absolut;
Rechts: 0px;
unten: 0px;
Cursor: NW-RSIZE;
Überlauf: versteckt;
Schriftgröße: 12px;
Text-Align: Mitte;
Zeilenhöhe: 15px;
Farbe: #ffffff;
float: rechts;
Z-Index: 3;
}
#Rechts{
Breite: 15px;
Höhe: 100%;
Hintergrund:#f00;
float: rechts;
Position: absolut;
Rechts: 0;
Top: 0;
Cursor: E-Resen;
Überlauf: versteckt;
Filter: Alpha (Deckkraft: 0);
Deckkraft: 0;
Z-Index: 1;
}
#unten{
Breite: 100%;
Höhe: 15px;
Hintergrund:#f00;
Position: absolut;
links: 0;
unten: 0;
Cursor: n-RSIZE;
Überlauf: versteckt;
Filter: Alpha (Deckkraft: 0);
Deckkraft: 0;
Z-Index: 1;
}
#div2 p {
Polsterung: 10px;
Zeilenhöhe: 24px;
Schriftgröße: 13px;
textindent: 24px;
Farbe:#996600;
}
#Div2 H2 {
Breite: 100%;
Höhe: 25px;
Zeilenhöhe: 25px;
Schriftgröße: 14px;
Hintergrund:#CC9900;
Farbe: #ffffff;
Text-Indent: 15px;
Cursor: Bewegung;
Überlauf: versteckt;
}
</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 ("rechts");
var boden = document.getElementById ("boden");
var musestart = {};
var divstart = {};
var rightStart = {};
var bottostart = {};
// rechts ziehen
Right.onmouseDown = Funktion (ev)
{
var oevent = ev || Ereignis;
Mousestart.x = oevent.clientX;
Mousestart.y = oevent.clienty;
rightStart.x = rechts.offsetLeft;
if (rechts.setcapture)
{
rechts.onmousemove = dodrag1;
rechts.onmouseUp = stopdrag1;
Right.SetCapture ();
}
anders
{
document.addeventListener ("mousemove", dodrag1, true);
document.adDeVentListener ("Mauseup", stopdrag1, true);
}
};
Funktion dodrag1 (ev)
{
var oevent = ev || Ereignis;
var l = oevent.clientx-mousstart.x+rightStart.x;
var w = l+odiv.offsetwidth;
if (w <odiv.offsetwidth)
{
w = odiv.offsetwidth;
}
sonst wenn (w> document.documentElement.clientwidth-odiv2.offsetleft)
{
w = document.documentElement.clientwidth-odiv2.offsetLeft-2;
}
odiv2.Style.width = w+"px";
};
Funktion Stopdrag1 ()
{
if (rechts.Releascapture)
{
rechts.onmousemove = null;
rechts.onmouseUp = null;
rechts.releascapture ();
}
anders
{
document.removeEventListener ("Mousemove", dodrag1, true);
document.removeEventListener ("mausup", stopdrag1, true);
}
};
// herunterziehen
boden.onmousedown = function (ev)
{
var oevent = ev || Ereignis;
Mousestart.x = oevent.clientX;
Mousestart.y = oevent.clienty;
bottomStart.y = boden.offsettop;
if (boden.setcapture)
{
boden.onmousemove = dodrag2;
boBo.onmouseUp = stopdrag2;
boden.setCapture ();
}
anders
{
document.addeventListener ("mousemove", dodrag2, true);
document.adDeVentListener ("Mauseup", stopdrag2, true);
}
};
Funktion dodrag2 (ev)
{
var oevent = ev || Ereignis;
var t = oevent.clienty-musestart.y+bottomstart.y;
var h = t+odiv.offseteight;
if (h <odiv.offseteight)
{
H = odiv.offseteight;
}
sonst wenn (h> document.documentElement.clientHeight-odiv2.offsettop)
{
h = document.documentElement.clientHeight-odiv2.offsettop-2;
}
ODIV2.Style.Height = H+"PX";
};
Funktion Stopdrag2 ()
{
if (boden.releascapture)
{
boden.onmousemove = null;
boden.onmouseUp = null;
boden.releasecapture ();
}
anders
{
document.removeEventListener ("Mousemove", dodrag2, true);
document.removeEventListener ("mauseup", stopdrag2, true);
}
};
// Impuls nach links und rechts gleichzeitig
odiv.onmousedown = function (ev)
{
var oevent = ev || Ereignis;
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 ();
}
anders
{
document.addeventListener ("Mousemove", Dodrag, true);
document.adDeVentListener ("Mauseup", Stopdrag, True);
}
zhezhao.style.display = 'block';
};
Funktion Dodrag (ev)
{
var oevent = ev || Ereignis;
var l = oevent.clientX-mousstart.x+divstart.x;
var t = oevent.clienty-musestart.y+divstart.y;
var w = l+odiv.offsetwidth;
var h = t+odiv.offseteight;
if (w <odiv.offsetwidth)
{
w = odiv.offsetwidth;
}
sonst wenn (w> document.documentElement.clientwidth-odiv2.offsetleft)
{
w = document.documentElement.clientwidth-odiv2.offsetLeft-2;
}
if (h <odiv.offseteight)
{
H = odiv.offseteight;
}
sonst wenn (h> document.documentElement.clientHeight-odiv2.offsettop)
{
h = document.documentElement.clientHeight-odiv2.offsettop-2;
}
odiv2.Style.width = w+"px";
ODIV2.Style.Height = H+"PX";
};
Funktion stopdrag ()
{
if (odiv.releascapture)
{
odiv.onmousemove = null;
odiv.onmouseUp = null;
odiv.releascapture ();
}
anders
{
document.removeEventListener ("Mousemove", Dodrag, True);
document.removeEventListener ("mauseup", stopdrag, true);
}
zhezhao.style.display = 'none';
};
// H2 Perfekter Drag
h2.onmouseDown = Funktion (ev)
{
var oevent = ev || Ereignis;
Mousestart.x = oevent.clientX;
Mousestart.y = oevent.clienty;
divstart.x = odiv2.offsetleft;
divstart.y = odiv2.offsettop;
if (h2setcapture)
{
h2.onmousemove = dodrag3;
h2.onmouseUp = stopdrag3;
H2.SetCapture ();
}
anders
{
document.adDeVentListener ("Mousemove", Dodrag3, True);
document.adDeVentListener ("mauseup", stopdrag3, true);
}
zhezhao.style.display = 'block';
};
Funktion dodrag3 (ev)
{
var oevent = ev || Ereignis;
var l = oevent.clientX-mousstart.x+divstart.x;
var t = oevent.clienty-musestart.y+divstart.y;
if (l <0)
{
L = 0;
}
sonst wenn (l> document.documentElement.clientwidth-odiv2.offsetwidth)
{
l = document.documentElement.clientwidth-odiv2.offsetwidth;
}
if (t <0)
{
t = 0;
}
sonst wenn (t> document.documentElement.clientHeight-odiv2.offseteight)
{
t = document.documentElement.clientHeight-odiv2.offseteight;
}
odiv2.Style.left = l+"px";
odiv2.Style.top = t+"px";
};
Funktion stopdrag3 ()
{
if (H2.Releascapture)
{
h2.onmousemove = null;
h2.onmouseUp = null;
H2.Releascapture ();
}
anders
{
document.removeEventListener ("Mousemove", dodrag3, true);
document.removeEventListener ("mausup", stopdrag3, true);
}
zhezhao.style.display = 'none';
}
};
</script>
</head>
<body>
<div id = "div2">
<div>
<h2> perfekter Drag </H2>
<p> Erleben Sie gute JavaScript -Webseite Ziehen. Zusätzlich zum Ziehen können Sie auch ziehen und vergrößern, und es wird wie ein Windows -Fenster vergrößert oder reduziert. Halten Sie einfach die untere rechte Ecke der Schicht gedrückt, um einfach ein- oder auszuzoomen. Freunde, die es verwenden möchten, können die JS im Code in eine Klasse zusammenfassen, und es ist wahrscheinlich vernünftiger, sie von außen einzuführen. '</p>
<div id = "rechts"> </div>
<div id = "div1"> Drag </div>
<div id = "boden"> </div>
</div>
</div>
<div id = "zhezhao"> </div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.