jquery 要让超大背景幻灯片显示图像不覆盖整个屏幕?

h4cxqtbf  于 2022-11-03  发布在  jQuery
关注(0)|答案(3)|浏览(177)

有很多全屏背景拉伸脚本。我使用的是http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/
我试图实现这样一种效果,即不是背景照片覆盖整个屏幕,而是在屏幕左侧留下250 px(对于固定的侧边栏),背景填充其余部分。重要的是,照片的全宽显示在屏幕的右侧部分。
这是我正在做的网站。正如你所看到的,背景被侧边栏的宽度推到了右边,但是部分背景被切掉了。
http://princeseafoodrestaurant.com/dev/
任何帮助都将不胜感激!

vm0i2vca

vm0i2vca1#

根据这一点,你可以自己这样做:
超级尺寸必须是全屏的吗?不!你可以通过调整CSS文件中的#supersized样式来定义尺寸。你会希望把position:fixed -〉position:absolute的所有示例都设置为“固定”。
所以,改变一下:


# supersized {

    display:block; 
    position:fixed; 
    left:0; 
    top:0; 
    overflow:hidden; 
    z-index:-999; 
    height:100%; 
    width:100%; 
}

更改为:


# supersized {

    display:block; 
    position:absolute;
    left:250px; 
    right:0;
    top:0; 
    overflow:hidden; 
    z-index:-999; 
    height:100%; 
}

然后将position:fixed的任何其他示例更改为position:absolute,您应该设置。

rsaldnfx

rsaldnfx2#

这可以在启动幻灯片显示时完成。请使用这些设置:

jQuery(function($){
    $.supersized({              
        fit_always : 0,
        fit_portrait : 0,
        fit_landscape : 0,
    });
});
kxeu7u2r

kxeu7u2r3#

使用此选项:


# supersized {

    display:block; 
    position:fixed; 
    left:0; 
    top:0; 
    overflow:hidden; 
    z-index:-999; 
    height:100%; 
    width:100%; 
    margin:0;
    padding:0
}

相关问题