Jquery悬停动画在浏览器窗口上调整缩放大小

我正在使用jQuery来在悬停图像时对其进行动画制作。我需要它能够被浏览器重新调整大小/缩放。问题是我无法获得溢出：隐藏起作用，因为我的div没有固定的高度。我想宽度是100％，我需要的高度是div的宽度的50％。请帮助Jquery悬停动画在浏览器窗口上调整缩放大小

链接到我的例子 http://www.jasalounge.com/tester/

$(function(){ 
     $("#box1 a").hover(function(){ 
      $("img", this).stop().animate({top:"-50%"},{queue:false,duration:150}); 
     }, function() { 
      $("img", this).stop().animate({top:"0px"},{queue:false,duration:150}); 
     }); 
    }); 


#box1 { 
    width:100%; 
    max-width:250px; 
    border:none; 
    overflow:hidden; 


} 
#box1 img { 
    width:100%; 
    position:relative; 

} 



    <div id="box1"><a href="#"><img src="images/test3.png" alt="test"/></a></div>

来源

2013-08-18 ijustchill

更改您的动画功能

$(function(){ 
    $("#box2 a").hover(function(){ 
     $("img", this).stop().animate({top:"-" + $("img", this).height()/2 +"px"},{queue:false,duration:150}); 
    }, function() { 
     $("img", this).stop().animate({top:"0px"},{queue:false,duration:150}); 
    }); 
});

更改CSS来

#box2_wrapper{ 
    width:30%; 
} 
#box2 { 
    overflow:hidden; 
    border:none; 
    height:0; 
    padding-bottom: 90%; 
} 

#box2 img { 
    width:100%; 
    position:relative; 
}

和HTML

<div id="box2_wrapper">   
    <div id="box2"> 
     <a href="#"><img style="top: 0px;" src="test_files/test3.png" alt="test"></a> 
    </div> 
</div>

这会将您的box div包装在一个包装中，您可以随意调整它的大小。 box2在这种情况下会变成一个长宽比为10：9的盒子，因为填充底部90％是包装宽度的90％。它是90％，因为你的图像是10:18宽高比，你想一次显示一半。

和

Keep div height relevant to aspect ratio

解释技术，这样做

来源

2013-08-18 09:48:54 DGS

它的工作几乎是完美的，但现在我在与显示在IE和向上滚动条的问题顶部和左边缘似乎有某种边界，就好像图像没有正确排列一样。我仍然对长宽比和填充底部％感到困惑。 http://jasalounge.com/tester2/ – ijustchill

更改#homeIntro溢出：隐藏删除滚动条。不确定你的意思是一些奇怪的边界。纵横比的东西在我指出的链接中解释得相当好。如果你想让一个盒子具有相对于高度的宽度，那么它与说盒子具有恒定的宽高比相同。由于在这种情况下的填充底部是基于元素的宽度计算的，这意味着包括填充的元素的高度将是宽度的90％。如果您认为正确，请记住接受正确的答案 – DGS

Jquery悬停动画在浏览器窗口上调整缩放大小

回答

相关问题