KeyPress 图片应该缩放。

Question

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

我希望这个操作可以在按键时发生。

我尝试了以下Javascript代码用于两张图片，我使用了transform scale。

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

这段代码质量很差。当我使用它时，与我展示的演示实例一样流畅。非常感谢任何帮助。

- Archana

---

@BenM：这个小提琴不是针对上面展示的代码的。请仔细阅读问题。 - Ganesh Jadhav

@BenM：“这段代码很糟糕。当我使用它时，它不像我展示的演示那样流畅。” - Ganesh Jadhav

@BenM：不是“他”，而是“她”。当她说代码与范例演示不同时，问题中只有一个代码部分和一个演示，她显然是指代码与演示中的不同。 - Ganesh Jadhav

Answer 1

改变CSS过渡效果。

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

to

   -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

- Sarath

---

已添加链接，请现在检查。 - Sarath

我不理解这是如何工作的。您在CSS中使用了“-webkit-transition: all 0.6s ease;”，但JS中没有任何更改，为什么按键时它会工作而不需要JS中的任何更改？第二个图像不起作用（而第一个图像应该返回到其先前的大小）。 - Archana

在你们的链接之间，他已经更改了Javascript以转换图像，而你们的Javascript应用了过渡而没有进行转换。 - Nunners

@Archana，请检查未被删除的答案。 - BenM

@Archana，我将过渡效果更改为“all”，这意味着CSS属性的任何更改都将使用“.6 ease”效果。 - Sarath

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演示

- BenM

---

那么当我需要缩放各种图像时，我需要在缩放之前先将每个图像缩小吗？ - Archana

我看到当我缩放第一张图片时，它会在第二张图片下面缩放。无论我缩放哪张图片，我都想把它带到最前面。就像这样。 - Archana

@Sarath 我已经明白你发布的内容了。但我想让重叠部分位于屏幕中央。 - Archana

@Archana 这是完全不同的问题。如果你想要实现这个，你需要在缩放行为之外操纵元素的定位。 - BenM

@Archana .. 好的，你可以添加一些 z-index 和 translate()，请查看此链接：http://fiddle.jshell.net/ajs2a/10/ - Sarath