javascript - 如何在 jQuery 中为边界内的图像设置动画

Question

我正在尝试使用 jQuery 在矩形边界内为图像制作动画，但我的代码并未限制图像可以移动的距离。如何修改我的代码以限制图像仅在 200 像素乘 300 像素的框中移动？

index.html

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

样式.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;
    }
 });

jsfiddle 演示:http://jsfiddle.net/waAK2/

Answer 1

嘿，刚刚为你的盒子做了一个 fiddle ，检查所有 Angular 落......只需要在一些条件下让它停止。

沿着这些线的东西:

if ($('.pic').css("left") >= "10") {
    $('.pic').animate({
        left: "-=10px"
        }, 'fast');
    }

http://jsfiddle.net/descene/waAK2/2/