Обработчик нескольких кнопок
Помогите пожалуйста!
Происжодит простое перемещение картинки в 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, время: 00:40. |