Question

好的，我有这样的结构：

<div class="image">
   <img src="img1.jpg" alt="" />
</div>

<div class="image">
   <img src="img1.jpg" alt="" />
</div>

<div class="image">
   <img src="img1.jpg" alt="" />
</div>

和CSS这样：

.image{
    height:100px;
    overflow: hidden;
}

基本上，只有图像的前100px显示。当用户将鼠标悬停在图像上时，我想将图像滚动到底部100px。即，它从显示前100px到底部100px的动画。

现在如果所有图像都是相同的高度，那将很容易。我能做到这一点，对于500px高的图像：

$('.image img').hover(
    function(){
     $(this).stop().animate({marginTop:'-400px',}, 1000);
    },
    function(){
     $(this).stop().animate({marginTop:'0px',}, 1000);
    }
   );

问题是，这三个图像的高度不同。据我所知，实际上没有任何可靠的方法来获得图像高度跨浏览器。我有什么想法可以解决这个问题吗？

非常感谢任何帮助。

Answer 1

您是否尝试过使用jQuery的height()方法来获取图像的高度？内置了可能的跨浏览器兼容性修补程序。

$('.image img').hover(
  var $th = $(this);
  var height = $th.height();
  function(){
   $th.stop().animate({marginTop:-(height - 100)}, 1000);
  },
  function(){
   $th.stop().animate({marginTop:'0px'}, 1000);
  }
);

jQuery向上滑动图像？

1 个答案: