Обработчик нескольких кнопок
Помогите пожалуйста!
Происжодит простое перемещение картинки в DIV-е с помощью клавиш вперед, назад, влево, вправо. Нужно сделать обработку такого события, например: при зажатой клавиши влево, картинка перемещается влево, не отпускаючи ее нажимаем вправо, картинка перемещается вправо(до этого места все отлично работает), отпускаем ТОЛЬКО вправо и картинка сново движется влево(подскажите как организовать эту часть). $('body').on('keydown', function(e) { e = e || event; var img = document.images['img_name']; var angl = Number(img.style.transform.replace(/[^.-\d+]/g,'')); pos_img = [Number(img.style.left.replace(/[^.-\d+]/g,'')), Number(img.style.top.replace(/[^.-\d+]/g,''))]; speed=4; switch(e.keyCode) { case 37: // влево if(angl == 270) { img.style.left = pos_img[0] - speed + 'px'; } else { jQuery(img).rotate({angle:270}); } break; case 38: // вверх if(angl == 0) { img.style.top = pos_img[1] - speed + 'px'; } else { jQuery(img).rotate({angle:0}); } break; case 39: // вправо if(angl == 90) { img.style.left = pos_img[0] + speed + 'px'; } else { jQuery(img).rotate({angle:90}); } break; case 40: // вниз if(angl == 180) { img.style.top = pos_img[1] + speed + 'px'; } else { jQuery(img).rotate({angle:180}); } break; }//end switch }); |
Намучал вот такой вариант подскажите может что не верно
var pressed = []; function runOnKeys() { var codes = [37,38,39,40]; document.onkeydown = function(e) { e = e || window.event; if(codes.indexOf(e.keyCode)!=-1 && pressed.indexOf(e.keyCode)==-1) { pressed[pressed.length]=e.keyCode } }; document.onkeyup = function(e) { e = e || window.event; if(codes.indexOf(e.keyCode)!=-1) { for(i in pressed) { if(pressed[i]==e.keyCode) {pressed.splice(i,1)} } }; }; } runOnKeys() function mov(){ $(".select").everyTime(70, function(i) { t=pressed[pressed.length-1] var img = document.images['img_name']; var angl = Number(img.style.transform.replace(/[^.-\d+]/g,'')); pos_img = [Number(img.style.left.replace(/[^.-\d+]/g,'')), Number(img.style.top.replace(/[^.-\d+]/g,''))]; speed=4; switch(t) { case 37: // влево if(angl == 270) { img.style.left = pos_img[0] - speed + 'px'; } else { jQuery(img).rotate({angle:270}); } break; case 38: // вверх if(angl == 0) { img.style.top = pos_img[1] - speed + 'px'; } else { jQuery(img).rotate({angle:0}); } break; case 39: // вправо if(angl == 90) { img.style.left = pos_img[0] + speed + 'px'; } else { jQuery(img).rotate({angle:90}); } break; case 40: // вниз if(angl == 180) { img.style.top = pos_img[1] + speed + 'px'; } else { jQuery(img).rotate({angle:180}); } break; }//end switch }); } мне кажется что то не так в соединении этих функций (everyTime), может у когото будет какой то вариант?! |
Здравствуйте.
Попробуйте использовать 2 обработчика: keydown и keyup. При keydown устанавливаете переменную соответствующего направления, при keyup разыменовываете, и при каждом событии проверяете что в данный момент у Вас нажато. Исходя из этого можно организовать движения дива по диагонали и т.д.. |
Часовой пояс GMT +3, время: 18:08. |