滚动上的jQuery动画标题[关闭]答案

【问题标题】：jQuery animated header on scroll [closed]滚动上的jQuery动画标题[关闭]
【发布时间】：2013-07-10 20:51:05
【问题描述】：

我正在寻找制作标题动画的方法like this one.

我在this post 上找到了解决方案，但它不适用于图像。我改变了这样的代码：

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

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

我能做什么？感谢您的帮助。

问题：如何用 div 缩放标题中的图像？

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

在标题缩小时缩小图像？

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);
        }  
    }
});

【讨论】：

谢谢。这很好用，只是图像在缩放时像素化。我该如何解决？
把它做成矢量图！
或者把它做成足够大的图片！
它是矢量透明png，比正常尺寸大。如何转换为矢量？
等等..让我给你一个工具

【解决方案2】：

如果您想裁剪图像，请将 overflow: hidden 添加到图像的父级 (#header_nav)，如果您希望图像缩小并带有标题，请将 max-height: 100%; 添加到图像。

【讨论】：

【解决方案3】：

将overflow: hidden添加到#header_nav，图像将被元素的高度裁剪：Working demo。

或者，将max-height: 100%; max-width: 100%添加到图像中，使其随着元素的高度而缩小：Working demo。

【讨论】：

谢谢，这也很好用，但这个也有相同的图像像素化问题。
您发布的示例网站以相同的方式缩放其图像。如果图像不包含非常复杂的细节，您将看不到那么多伪影。例如，Salient 标志由粗体字母和纯色形状组成。