Question

我尝试使用jQuery keydown和animate来移动位于长网页中间的图像。但是，每次按下向上和向下键，浏览器也会向上和向下滚动。有没有办法让浏览器保持静态，因为我只移动我的图像？谢谢！

的index.html

<img class="pic" src="panda.jpg"/>

的style.css

.pic {
position: relative;
left: 0;
top: 0;
margin-left: 355px; 
margin-top: -180px;
}

jquery

$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) 
    case 37:
    $('.pic').animate({left: "-=10px"}, 'fast');
    break;
    case 38:
    $('.pic').animate({top: "-=10px"}, 'fast');
    break;
    case 39:
    $('.pic').animate({left: "+=10px"}, 'fast');
    break;
    case 40:
    $('.pic').animate({top: "+=10px"}, 'fast');
    break;
       }
   });

Answer 1

活动上的call preventDefault()（您在此处作为“密钥”传递），或者在功能结束时返回false：

$(document).keydown(function(key) {
    key.preventDefault();
    ...
});

或者：

$(document).keydown(function(key) {
    ...
    return false;
});

作为奖励，此处在parseInt()上调用key.which是不必要的，因为这会返回一个数值。

由于这个答案是由于显而易见的原因而随机投票，here is a JSFiddle demo showing preventDefault() in action。

有没有办法使用jQuery keydown移动图像而无需浏览器上下滚动？

1 个答案: