javascript - KeyPress 图像应该缩放

Question

这是我的链接http://fiddle.jshell.net/ajs2a/4/

我希望这发生在 keyPress 上。

我为 2 张图像尝试过的 Javascript 代码，我使用了变换比例。

var image1 = document.getElementById("img1");
var image2 = document.getElementById("img2");
document.addEventListener('keydown', doKeyDown, true);

function doKeyDown(e){

    //====================
    //  THE W KEY
    //====================
    if (e.keyCode == 87) {
        image1.setAttribute('style', '-webkit-transform:scale(6);');
        image2.setAttribute('style', '-webkit-transform:scale(1);');
    }

    //====================
    //  THE X KEY
    //====================
    if (e.keyCode == 88) {
        image1.setAttribute('style', '-webkit-transform:scale(1);');
        image2.setAttribute('style', '-webkit-transform:scale(6);');
    }
}

这段代码很糟糕。当我使用它时，它不像我展示的 fiddle 演示那样流畅。非常感谢任何帮助。

Answer 1

改变CSS过渡

-webkit-transition: width 0.6s ease,height 0.6s ease,left 0.6s ease,top 0.6s ease;

到

   -webkit-transition: all 0.6s ease;

并更正了 css 类对 ids 的更改。

如果你想居中，让它像

 image1.setAttribute('style', '-webkit-transform:scale(2) translate(0,50px);z-index:1');
 image2.setAttribute('style', '-webkit-transform:scale(1) translate(0,0);z-index:0');

DEMO