jquery超大，下方有导航栏

Question

我正在尝试使用 jquery 超大插件合并主页以显示用图像填充页面的幻灯片，但页面底部的导航栏除外。

导航栏高 110 像素，宽度为 100%。我遇到的问题是让图像在距页面底部 110 像素处“停止”。我玩过用插件下载的超大 css 文件，但似乎没有任何效果。

有谁知道这是否可行，或者我是否可以使用任何其他全屏幻灯片放映，以便在页面底部留出空间？

谢谢 京东

Answer 1

您不能只修改 CSS。

您需要了解此插件的工作原理。

首先，它在页面底部创建一个 div。这个 div 有以下 CSS:

#supersized {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -999;
}

此样式使其与屏幕大小相同，并将其置于所有其他内容之下。

其次，在该 div 中，您有一个 IMG。 此图像具有以下样式:

#supersized img {
    border: medium none;
    height: auto;
    image-rendering: optimizequality;
    outline: medium none;
    position: relative;
    width: auto;
}

但是，这个样式的一部分被插件覆盖了!

<img src="img.jpg" style="width: 1672.22px; left: -4px; top: 0px; height: 602px;" />

并且这个样式定义在插件JS核心中。

如果你想让你的图片比插件低 110 像素，你还必须更改以下行(supersized.3.1.3.core.js，第 84 行) :

//Gather browser size
var browserwidth = $(window).width();
var browserheight = $(window).height();
var offset;

...如果您使用的是缩小版本，那将是相当困难的。

其他建议:【看supersized demo(http://buildinternet.com/project/supersized/slideshow/3.2/demo.html)做一个类似的导航栏(透明!) , 或者允许用户隐藏导航栏(将其隐藏在 Angular 落里)，如果他们真的想要 110px。