在按鍵上縮放我的圖像

Question

我在頁面中心的各個下方顯示了各種圖像。 在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上的圖像

Answer 1

嘗試

document.addEventListener('keydown', doKeyDown, true); 代替

演示

W放大，X放大

（不過，這僅適用於chrome，對於其他瀏覽器，您必須添加特定於瀏覽器的CSS）

在按鍵上縮放我的圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2013-12-10 10:27:29

在按鍵上縮放我的圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2013-12-10 10:27:29

解決方案1
0 已采納 2013-12-10 10:27:29