javascript - 在按键上缩放我的图像

我在页面中央一张一张地显示各种图片。在 keyPress 上，我想在页面中央的列表中显示或缩放特定图像。

例如，图像未缩放，但使用过渡显示该位置的图像的另一个副本。

我试过的代码是这样的:

<!DOCTYPE html>
<html>
<head>
 <title>Page Title</title>
 <link rel="Stylesheet" type="text/css" href="channel.change.css" />
 <script>
    var image = document.getElementById("img1");
image.addEventListener('keydown', doKeyDown, true);

    function doKeyDown(e){

        //====================
        //  THE W KEY
        //====================
        if (e.keyCode == 87) {
                            image.setAttribute('style', 'width:300px !important;');
        }
    }
</script>
</head>

<body>
<div>
<img id="img1" src="http://sphotos-c.ak.fbcdn.net/hphotos-ak-   snc6/189287_403070459759757_137788631_n.png" alt="" class="zoom_image"/>
</div>
</body>
</html>

我的 CSS 代码是:

.zoom_image
{
display: block;
padding: 10px 10px 10px 10px;
position:relative;
width:100px;
height:80px;
left:0px;
top:0px;
border:1px solid black;
-webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}

.zoom_image:hover
{
width:500px;
height:480px;
left:-25px;
top:-25px;
z-index:9999;
}

我希望我的 css 应用于 keyPress 上的图像

最佳答案

尝试

document.addEventListener('keydown', doKeyDown, true); 而不是

DEMO

W 放大，X 缩小

(这仅适用于 chrome，对于其他浏览器，您必须添加特定于浏览器的 css)

关于javascript - 在按键上缩放我的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20491464/