【问题标题】: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 标志由粗体字母和纯色形状组成。
      猜你喜欢
      • 1970-01-01
      • 2016-07-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-09-12
      • 1970-01-01
      • 2015-08-03
      • 2015-05-06
      相关资源
      最近更新 更多