Cet article décrit la méthode d'implémentation du clavier pour contrôler le mouvement Div par JS. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Partie de style CSS:
Copiez le code comme suit: <style type = "text / css">
html, corps {débordement: caché;}
corps {marge: 0; rembourrage: 0;}
pre {couleur: vert; rembourrage: 10px 15px; arrière-plan: # f0f0f0; bordure: 1px pointillé # 333; police: 12px / 1.5 courrier new; marge: 12px;}
Span {couleur: # 999;}
#box {position: absolu; top: 50px; gauche: 300px; largeur: 100px; hauteur: 100px; fond: rouge;}
</ style>
JS Partie:
Copiez le code comme suit: <script type = "text / javascript">
window.onload = function ()
{
var obox = document.getElementById ("box");
var bleft = btop = bright = bbottom = bctrlkey = false;
setInterval (function ()
{
if (Bleft)
{
obox.style.left = obox.offsetleft - 10 + "px"
}
sinon si (brillant)
{
obox.style.left = obox.offsetleft + 10 + "px"
}
if (btop)
{
obox.style.top = obox.offsettop - 10 + "px"
}
sinon if (bbottom)
{
obox.style.top = obox.offsettop + 10 + "px"
}
// Empêcher le débordement
limite();
}, 30);
document.onkeydown = fonction (événement)
{
var event = événement || window.event;
bctrlkey = event.ctrlkey;
commutateur (event.KeyCode)
{
Cas 37:
Bleft = true;
casser;
Cas 38:
if (bctrlkey)
{
var oldwidth = obox.offsetWidth;
var oldheight = obox.offsetheight;
obox.style.width = obox.offsetWidth * 1.5 + "px";
obox.style.height = obox.offsetheight * 1.5 + "px";
obox.style.left = obox.offsetleft - (obox.offsetwidth - oldwidth) / 2 + "px";
obox.style.top = obox.offsetTop - (obox.offsetheight - oldheight) / 2 + "px";
casser;
}
btop = true;
casser;
Cas 39:
brillant = vrai;
casser;
Cas 40:
if (bctrlkey)
{
var oldwidth = obox.offsetWidth;
var oldheight = obox.offsetheight;
obox.style.width = obox.offsetwidth * 0,75 + "px";
obox.style.height = obox.offsetheight * 0,75 + "px";
obox.style.left = obox.offsetleft - (obox.offsetwidth - oldwidth) / 2 + "px";
obox.style.top = obox.offsetTop - (obox.offsetheight - oldheight) / 2 + "px";
casser;
}
bbottom = true;
casser;
Cas 49:
bctrlkey && (obox.style.background = "green");
casser;
Cas 50:
bctrlkey && (obox.style.background = "jaune");
casser;
Cas 51:
bctrlkey && (obox.style.background = "blue");
casser;
}
retourner faux
};
document.onkeyup = fonction (événement)
{
commutateur ((événement || window.event) .KeyCode)
{
Cas 37:
bleft = false;
casser;
Cas 38:
btop = false;
casser;
Cas 39:
brillant = false;
casser;
Cas 40:
bbottom = false;
casser;
}
};
// Empêcher le débordement
Fonction Limit ()
{
var doc = [document.DocumentElement.ClientWidth, document.DocumentElement.ClientHeight]
// empêche le côté gauche de déborder
obox.offsetLeft <= 0 && (obox.style.left = 0);
// Empêche le débordement supérieur
obox.offsetTop <= 0 && (obox.style.top = 0);
// Empêche le côté droit de déborder
doc [0] - obox.offsetleft - obox.offsetwidth <= 0 && (obox.style.left = doc [0] - obox.offsetWidth + "px");
// Empêcher le débordement inférieur
doc [1] - obox.offsettop - obox.offsetheight <= 0 && (obox.style.top = doc [1] - Obox.offsetheight + "px")
}
};
</cript>
illustrer:
En haut: ↑ Suivant: ↓ gauche: ← Droite: →
Ctrl + 1: Le fond devient vert
Ctrl + 2: Le fond devient jaune
Ctrl + 3: Le fond change en bleu
Ctrl + ↑: zoomer
Ctrl + ↓: rétrécissement
HTML PARTIE:
La copie de code est la suivante: le bloc est déplacé [div]
<div id = "box"> </ div>
J'espère que cet article sera utile à la programmation JavaScript de tous.