Question

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

我在this post上找到了一个解决方案，但它没有使用图片。我改变了这样的代码：

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

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

我该怎么办？谢谢你的帮助。

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

任何帮助将不胜感激！

Answer 1

将overflow: hidden添加到#header_nav，图片将按元素的高度进行裁剪：Working demo。

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

Answer 2

标题缩小时缩小图像？

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

Answer 3

我想裁剪图像将overflow: hidden添加到图像的父级#header_nav），如果您希望图像缩小，则标题会将max-height: 100%;添加到图像中。

滚动时jQuery动画标题

3 个答案: