Question

我有一个标题，使用两个图像作为背景，一个在网页滚动到最顶部时显示，另一个是在页面向下滚动时显示的较小图像。该演示可在此处获得：harrisonbh.com/dev/transitions

我希望两者之间的过渡顺利，但我对JavaScript并不熟悉，所以我完全迷失了。

标题div转换的代码是：

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

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('#header').data('size') == 'big')
        {
            $('#header').data('size','small');
            $('#header').stop().animate({
                height:'100px'
            },600);

            $('#logo').stop().animate({
                height: '100px'
            },600);

           document.getElementById("logo").style.backgroundImage="url('hub_test_files/arih_header_v2_small.png')";
        }
    }
    else
    {
        if($('#header').data('size') == 'small')
        {
            $('#header').data('size','big');
            $('#header').stop().animate({
                height:'275px'
            },600);

            $('#logo').stop().animate({
                height: '272px'
            },600);

            document.getElementById("logo").style.backgroundImage="url('hub_test_files/arih_header_v2.png')";
        }  
    }
});

我确实尝试过CSS和JS转换，但它们似乎都不起作用，所以对于现在和未来这个问题的观众来说，有没有办法在JS中的大图像和小图像之间进行转换？谢谢。

Note: The website that I am using to change the header on is not mine, just me experimenting, but I intend to give the final code to the owner.

使用JS从大图像转换为较小的图像

0 个答案: