jquery超大的導航欄

Question

我試圖用jquery supersized插件創建一個主頁來顯示一個幻燈片，用圖像填充頁面，除了頁面底部的導航欄。

導航欄高110px，寬度爲100％。我遇到的問題是讓圖像從頁面底部以110像素「停止」。我玩過我用插件下載的超大型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; 
} 

嘗試嗎？