Question

这是我的问题：我有6张图片：

<img class="img" src="key_1.png" />
<img class="img" src="key_2.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_4.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_6.png" />

我想要做的是当我按下“向上”和“向下”箭头键时，图像会旋转：

document.onkeydown = function () {
    switch (window.event.keyCode) {
    case 38:
        document.getElementsByClassName("img").style.webkitTransform = "rotate(7deg)"
        break;
    case 40:
        document.getElementsByClassName("img").style.webkitTransform = "rotate(-14deg)"
        break;
    }
};

但它不起作用。

Answer 1

应将

event作为参数传递给事件处理程序。发生事件时，event对象作为参数传递给事件处理程序。它不是全局对象，因此您不能像window.event一样使用它。

var eventHandler = function(event) {
  console.log(event.keyCode);

  // Your code here
  switch (event.keyCode) {
    case 38:
      document.getElementsByClassName("img").style.webkitTransform = "rotate(7deg)"
      break;
    case 40:
      document.getElementsByClassName("img").style.webkitTransform = "rotate(-14deg)"
      break;
  }
};

document.addEventListener('keydown', eventHandler, false);

<img class="img" src="key_1.png" />
<img class="img" src="key_2.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_4.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_6.png" />

Answer 2

以下代码将在每次按键时旋转所有图像1deg clock / counterwise。

var deg  = 0,
    $img = $( 'img' );

function rotateImages ( deg ) {  
  $img.css({
    '-webkit-transform': 'rotate(' + deg + 'deg )',
    '-moz-transform':    'rotate(' + deg + 'deg )',
    'transform':         'rotate(' + deg + 'deg )'
  });
}

$( document ).on( 'keydown', function ( e ) {
  e.preventDefault(); // Prevents the page from scrolling up/down
  
  switch( e.keyCode || e.which ) {
    case 38:
      deg++;
      rotateImages( deg );
      break;
      
    case 40:
      deg--;
      rotateImages( deg );
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100">

Answer 3

试试这个：

function rotate(deg) {
  var elems = document.getElementsByClassName('img');
  for(var i in elems) {
    var elem = elems[i];
    elem.style.webkitTransform = 'rotate('+deg+'deg)';
  }
}

document.onkeydown = function(event) {
    switch(event.keyCode) {
        case 38:
            rotate(7);
            break;
        case 40:
            rotate(-14);
            break;
    }
};

正在运行示例：http://plnkr.co/edit/RAg0wbwALTvT2tfzPumH?p=preview

请注意，我必须重写旋转，因为您使用getElementsByClassName返回列表而不是单个对象，因此您必须迭代它。

编辑：虽然检查了这个＆＃34;正确＆＃34;使用addEventListener执行此操作的非侵入式方法： http://plnkr.co/edit/FpYfow6Wmou8zGs483hc?p=preview

JavaScript keydown事件不起作用

3 个答案: