显示图像部分没有画布没有框架或没有插件

Question

我有img，并且周围有div个框。

http://jsfiddle.net/6d4yC/7/

1）我希望当图像尺寸较大时，只需要图像的一部分（250x150），而不会在图像上创建白色覆盖。我在图像周围放了一个＃box1 div，它不能限制显示的图像。

2）当鼠标离开图片时，我想甚至打破动画，只需将图像设置为大尺寸动画。

我怎样才能实现这些目标？感谢。

Answer 1

1. 向您的div添加overflow: hidden。
2. 添加停止（）以停止当前动画

JsFiddle：http://jsfiddle.net/6d4yC/9/

Answer 2

只需将overflow: hidden;添加到＃box1的css中即可。至于你的javascript

$(document).ready(function(){
  $("#box1").mouseenter(function(){
    $("img").stop().animate({width:'250px',height:'150px'},500);
  });
  $("#box1").mouseleave(function(){
    $("img").stop().animate({width:'600px',height:'200px'},500);
  });
});