Changer la taille de l'image en fonction de la touche pressée

$(window).keydown(function(event){ 
    var c = String.fromCharCode(event.which); 
    if (c === 'a'){ 
     myImage.css("height", "+=2"); 
     myImage.css("width", "+=2"); 
    } else if (c === 's'){ 
     myImage.css("height", "-=2"); 
     myImage.css("width", '-=2'); 
    } 
});

Ceci est mon code, j'essaie de réduire l'image de 2 pixels lorsque la touche s est enfoncée et de 2 pixels de plus lorsque la touche a est enfoncée. Le code ne fait rien pour l'instant.Changer la taille de l'image en fonction de la touche pressée

Je reçois un avertissement "l'utilisation de getpreventdefault() est obsolète" mais je ne pense pas que c'est ce qui cause cela. Editer: Je devrais mentionner que l'avertissement n'apparaît qu'après avoir appuyé sur une touche.

Source

2017-04-12 Kait Jardine

Je ne crois pas que vous pouvez utiliser '- = 2' comme attribut CSS comme ça. Vous aurez probablement besoin de faire le calcul (obtenir la taille actuelle, soustraire ou ajouter 2), puis appliquer cette largeur spécifique à l'image. En tant que note secondaire, je me concentrerais sur définir la largeur ou la hauteur, et laisser la propriété AUTRE comme "auto" - simplifierait considérablement les choses. –

Une version antérieure j'avais utilisé var height = $ (myImage) .height() + 2; et \t myImage.css ("height", height); N'a toujours pas fonctionné –

Donc, dans un test que j'ai fait, il semble que le code de la lettre arrive en majuscule, même si je ne spécifie pas de majuscule - voir comment j'ai modifié les instructions IF pour faire fonctionner ce violon (et, BTW, votre - = 2 fonctionne en fait): https://jsfiddle.net/cale_b/5hzqe8o6/ –

Il suffit de calculer la largeur et la hauteur pour chaque pression de touche. Mettez à jour la largeur et la hauteur.

$(window).keydown(function(e){ 
    var $img = $('#myImg'), 
     key = e.which, 
     height = $img.height(), 
     width = $img.width(); 

    if (key === 65) 
    $img.css("height", height + 2).css("width", height + 2); 
    else if (key === 83) 
    $img.css("height", height - 2).css("width", height - 2); 
});

Vérifiez la fiddle here pour un exemple de travail. Si vous avez besoin de calculer pour différentes clés, vous pouvez obtenir les codes-clés from this sweet codepen.

Source

2017-04-12 20:26:21

Changer la taille de l'image en fonction de la touche pressée

Répondre

Questions connexes