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);');
    }
}

這段代碼很糟糕。 當我使用它時，它不像我演示的小提琴演示那樣順暢。 任何幫助都非常感謝。

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

Answer 2

將以下CSS添加到#img1 ：

-webkit-transition: all 0.6s ease;

我有點簡化你的JS：

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

function doKeyDown(e){

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

    // K Key:
    if(e.keyCode == 88) 
    {
        image1.setAttribute('style', '-webkit-transform:scale(1);');
    }
}

這與預期完全一致。

jsFiddle演示