javascript - 滚动时的 jQuery 动画标题

Question

我正在寻找一种制作像这样的标题动画的方法。

我在这篇文章中找到了解决方案，但它不适用于图像。我改变了这样的代码：

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

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

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

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

任何帮助，将不胜感激！

Answer 1

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

Answer 2

添加overflow: hidden到#header_nav并且图像将被元素的高度裁剪：工作演示。

或者，添加max-height: 100%; max-width: 100%到图像以使其随元素的高度缩小：工作演示。

Answer 3

当标题缩小时缩小图像？

小提琴。

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