jQuery的動畫標題上滾動

我在尋找一種方法，使一個頭動畫like this one.jQuery的動畫標題上滾動

我發現在this post一個解決方案，但它不處理圖像。我改變了這樣的代碼：

<div id="header_nav"><img src="http://placehold.it/90x90" /></div>

http://jsfiddle.net/JJ8Jc/72/

我能做些什麼？謝謝您的幫助。

問題：如何在標題中使用其div縮放圖像？

任何幫助，將不勝感激！

來源

2013-07-09 trikutin

當頭部縮小時縮小圖像？

Fiddle.

$(function(){ 
    $('#header_nav').data('size','big'); 
}); 

$(window).scroll(function(){ 
    if($(document).scrollTop() > 0) 
    { 
     if($('#header_nav').data('size') == 'big') 
     { 
      $('#header_nav').data('size','small'); 
      $('#header_nav').stop().animate({ 
       height:'40px' 
      },600); 
      $('#header_nav img').stop().animate({ 
       height:'40px' /*image has the same effect like the header*/ 
      },600); 
     } 
    } 
    else 
    { 
     if($('#header_nav').data('size') == 'small') 
     { 
      $('#header_nav').data('size','big'); 
      $('#header_nav').stop().animate({ 
       height:'100px' 
      },600); 
      $('#header_nav img').stop().animate({ 
       height:'100px' /*image has the same effect like the header*/ 
      },600); 
     } 
    } 
});

來源

2013-07-09 13:19:55

謝謝。這是行之有效的，只是在縮放時圖像像素化。我該如何解決它？ – trikutin

使其成爲矢量圖！ –

或使它成爲一個足夠大的圖像！ –

將overflow: hidden添加到#header_nav並且圖片將被剪裁元素的高度：Working demo。

或者，將max-height: 100%; max-width: 100%添加到圖像中，使其隨元素的高度收縮：Working demo。

來源

2013-07-09 13:19:10 freejosh

謝謝這個工作也很好，但也有一個相同的圖像pixelate問題。 – trikutin

您發佈的示例網站以相同的方式縮放其圖片。如果圖像不包含非常複雜的細節，則不會看到很多僞像。例如，Salient徽標由粗體字母和純色形狀組成。 – freejosh

我要裁剪的圖像添加overflow: hidden到圖像（#header_nav）的父母，如果你想使圖像與頭縮添加max-height: 100%;的形象。

來源

2013-07-09 13:21:25

jQuery的動畫標題上滾動

回答

相關問題