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懸停動畫在瀏覽器窗口上調整縮放大小

回答

相關問題