Question

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

导航栏高110px，宽度为100％。我遇到的问题是让图像从页面底部“停止”110pixels。我玩过我用插件下载的超大css文件，但似乎没有什么可以做的。

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

由于 JD

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核心中定义。

如果你想让你的图片比插件更低110px，你还必须改变以下行（ supersized.3.1.3.core.js，第84行）：

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

......如果您使用的是缩小版本，那就更难了。

其他建议：[查看超大型演示（http://buildinternet.com/project/supersized/slideshow/3.2/demo.html）并执行类似的导航栏（透明！），或允许用户隐藏导航栏（隐藏在角落里），如果他们真的想要110px。

Answer 2

#controls-wrapper {
  bottom:100px !important;
}
#supersized li {
  bottom:100px !important;
  height:auto !important;
}

试试吗？

jquery超大了下面的导航栏

2 个答案: