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类的更改更正为ID。

如果你想集中使它像

 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 Demo

KeyPress图像应该缩放

2 个答案: