Cet article décrit la méthode d'implémentation de l'effet de glisser-fiche de la couche JS et amplifié. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> JS réalise l'effet de glissement de la couche et peut également faire glisser et zoomer dans </Title>
<style>
* {marge: 0; rembourrage: 0;}
#zhezhao {
Largeur: 100%;
hauteur: 100%;
Contexte: # F00;
filtre: alpha (opacité: 0);
Opacité: 0;
Z-Index: 9999;
Position: absolue;
en haut: 0;
à gauche: 0;
Affichage: aucun;
}
# div2 {
Largeur: 200px;
hauteur: 200px;
Position: relative;
Contexte: #eeeeee;
Border: 1px solide # f00;
}
# div1 {
Largeur: 15px;
hauteur: 15px;
Contexte: # 99cc00;
Position: absolue;
Droite: 0px;
En bas: 0px;
curseur: NW-Resize;
débordement: caché;
taille de police: 12px;
Texte-aligne: Centre;
hauteur de ligne: 15px;
Couleur: #ffffff;
flottant: à droite;
Z-Index: 3;
}
#droite{
Largeur: 15px;
hauteur: 100%;
Contexte: # F00;
flottant: à droite;
Position: absolue;
à droite: 0;
en haut: 0;
curseur: E-Resize;
débordement: caché;
filtre: alpha (opacité: 0);
Opacité: 0;
Z-Index: 1;
}
#bas{
Largeur: 100%;
hauteur: 15px;
Contexte: # F00;
Position: absolue;
à gauche: 0;
en bas: 0;
curseur: n-resize;
débordement: caché;
filtre: alpha (opacité: 0);
Opacité: 0;
Z-Index: 1;
}
# div2 p {
rembourrage: 10px;
hauteur de ligne: 24px;
taille de police: 13px;
Texte-indent: 24px;
Couleur: # 996600;
}
# div2 h2 {
Largeur: 100%;
hauteur: 25px;
hauteur de ligne: 25px;
taille de police: 14px;
Contexte: # CC9900;
Couleur: #ffffff;
Texte-indent: 15px;
curseur: déplacer;
débordement: caché;
}
</ 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 droit = document.getElementById ("droite");
var inférieur = document.getElementById ("inférieur");
var mousstart = {};
var divStart = {};
var tout droit = {};
var bottomstart = {};
// tire à droite
à droite.onmousedown = fonction (ev)
{
var oevent = ev || événement;
MouseStart.x = Oevent.Clientx;
MouseStart.y = Oevent.Clienty;
RightStart.x = droite.offsetLeft;
if (droite.setCapture)
{
à droite.onMouseMove = DODRAG1;
droite.onMouseUp = stopdrag1;
droite.setCapture ();
}
autre
{
Document.AddeventListener ("MouseMove", DODRAG1, true);
Document.AddeventListener ("MouseUp", Stopdrag1, true);
}
};
fonction dodrag1 (ev)
{
var oevent = ev || événement;
var l = oevent.clientx-mousstart.x + tout droit .x;
var w = l + odiv.offsetwidth;
if (w <odiv.offsetwidth)
{
w = odiv.offsetwidth;
}
else if (w> document.documentElement.clientwidth-odiv2.offsetleft)
{
w = document.DocumentElement.ClientWidth-odiv2.offsetLeft-2;
}
odiv2.style.width = w + "px";
};
Fonction Stopdrag1 ()
{
if (à droite.releascapture)
{
à droite.onMouseMove = null;
droite.onmouseup = null;
droite.releSeaCapture ();
}
autre
{
Document.RemoveEventListener ("MouseMove", DODRAG1, true);
Document.RemoveEventListener ("MouseUp", Stopdrag1, true);
}
};
//Abattre
inférieur.onmousedown = fonction (ev)
{
var oevent = ev || événement;
MouseStart.x = Oevent.Clientx;
MouseStart.y = Oevent.Clienty;
Bottomstart.y = inférieur.offsetTop;
if (inférieur.setCapture)
{
inférieur.onMouseMove = DODRAG2;
inférieur.onmouseUp = stopdrag2;
inférieur.setCapture ();
}
autre
{
Document.AddeventListener ("MouseMove", DODRAG2, true);
Document.AddeventListener ("MouseUp", Stopdrag2, true);
}
};
fonction dodrag2 (ev)
{
var oevent = ev || événement;
var t = oevent.clienty-mousstart.y + bottomstart.y;
var h = t + odiv.offsetheight;
if (h <odiv.offsetheight)
{
h = odiv.offsetheight;
}
else if (h> document.documentElement.clientHeight-odiv2.offsetTop)
{
H = document.DocumentElement.ClientHeight-odiv2.OffsetTop-2;
}
odiv2.style.height = h + "px";
};
Fonction Stopdrag2 ()
{
if (en bas.
{
inférieur.onMouseMove = null;
inférieur.onmouseup = null;
inférieur.releSeaCapture ();
}
autre
{
Document.RemoveEventListener ("MouseMove", DODRAG2, true);
Document.RemoveEventListener ("MouseUp", Stopdrag2, true);
}
};
// Pulse à gauche et à droite en même temps
odiv.onmousedown = fonction (ev)
{
var oevent = ev || événement;
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 ();
}
autre
{
Document.AddeventListener ("MouseMove", DoDrag, True);
Document.AddeventListener ("MouseUp", Stopdrag, true);
}
zhezhao.style.display = 'bloc';
};
fonction dodrag (ev)
{
var oevent = ev || événement;
var l = oevent.clientx-mousstart.x + divstart.x;
var t = oevent.clienty-mousstart.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-odiv2.offsetleft)
{
w = document.DocumentElement.ClientWidth-odiv2.offsetLeft-2;
}
if (h <odiv.offsetheight)
{
h = odiv.offsetheight;
}
else if (h> document.documentElement.clientHeight-odiv2.offsetTop)
{
H = document.DocumentElement.ClientHeight-odiv2.OffsetTop-2;
}
odiv2.style.width = w + "px";
odiv2.style.height = h + "px";
};
Function Stopdrag ()
{
if (odiv.releascapture)
{
odiv.onmouseMove = null;
odiv.onmouseup = null;
odiv.releSeaCapture ();
}
autre
{
Document.RemoveEventListener ("MouseMove", DODRAG, true);
Document.RemoveEventListener ("MouseUp", Stopdrag, true);
}
zhezhao.style.display = 'Aucun';
};
// H2 Perfect Drag
h2.onmousedown = fonction (ev)
{
var oevent = ev || événement;
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 ();
}
autre
{
Document.AddeventListener ("MouseMove", DODRAG3, true);
Document.AddeventListener ("MouseUp", Stopdrag3, true);
}
zhezhao.style.display = 'bloc';
};
fonction dodrag3 (ev)
{
var oevent = ev || événement;
var l = oevent.clientx-mousstart.x + divstart.x;
var t = oevent.clienty-mousstart.y + divstart.y;
if (l <0)
{
l = 0;
}
else if (l> document.documentElement.clientWidth-odiv2.offsetwidth)
{
l = document.DocumentElement.ClientWidth-odiv2.OffsetWidth;
}
if (t <0)
{
t = 0;
}
else if (t> document.documentElement.clientHeight-odiv2.offsetheight)
{
t = document.DocumentElement.ClientHeight-odiv2.offsetheight;
}
odiv2.style.left = l + "px";
odiv2.style.top = t + "px";
};
Fonction Stopdrag3 ()
{
if (h2.releascapture)
{
H2.OnMouseMove = null;
h2.onmouseup = null;
H2.releSeaCapture ();
}
autre
{
Document.RemoveEventListener ("MouseMove", DODRAG3, true);
Document.RemoveEventListener ("MouseUp", Stopdrag3, true);
}
zhezhao.style.display = 'Aucun';
}
};
</cript>
</ head>
<body>
<div id = "div2">
<div>
<h2> drag parfait </h2>
<p> Découvrez une bonne traînée de page Web JavaScript. En plus de faire glisser, vous pouvez également faire glisser et agrandir, qui est agrandie ou réduite comme une fenêtre Windows. Appuyez simplement sur le coin inférieur droit de la couche pour zoomer ou sortir facilement. Si vous souhaitez l'utiliser, vous pouvez encapsuler le JS dans le code dans une classe, et il est probablement plus raisonnable de l'introduire de l'extérieur. '</p>
<div id = "droite"> </ div>
<div id = "div1"> glisser </div>
<div id = "inférieur"> </ div>
</div>
</div>
<div id = "zhezhao"> </div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.