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);而不是

DEMO

W放大，X放大

（这只适用于chrome，但对于其他浏览器，您必须添加特定于浏览器的CSS）

在按键上缩放我的图像

1 个答案: