5000px +寬水平滾動？

Question

我建立這個網站，我基本上都在此頁兩個問題： http://sites.publishyours.com.br/silviamecozzi/pt/obra/deserto_das_palmas.php

上的鏈接，你會看到大小不同的一些「會」的圖像和它的傳說。 這些圖像中的一部分寬度將會高達1700px +，這是第一個問題和問題。

檢查HTML和CSS，你會看到一個ID爲「畫廊」，其中包含所有圖像的股利。它是絕對定位的，我將其寬度設置爲4800像素（不足以保存所有圖像全部浮動到左側，如果將此寬度更改爲5000像素，則足以容納所有圖像，一切都會正常因爲它應該是，但...

問題01： 爲什麼我需要設置div＃圖庫寬度？我將有其他部分像這樣不同的圖像/大小，我不能預覽它有多寬我只是希望它能夠像需要的那樣寬，如果我以後需要添加更多圖像，我希望它可以根據需要將其推到更寬的位置。

問題02： 首先說明我如何設置「gallery」div的左邊位置爲-150px。 好吧，一旦我有了fir st問題解決了，我可能會將'html'標記設置爲{overflow-x：hidden; }。並使用與網站一樣寬的水平滾動（+ - 920px），位於圖像下方，我希望圖像能夠從{hidden：right}'{left：0px; }到「隱藏的左側」，例如{left：-3980px; }的瀏覽器，反之亦然，因爲用戶使用滾動...此滾動需要計算#gallery div的寬度和所有...有人可以指向我的jQuery插件，這將幫助我做到這一點？我正在考慮jscrollpane（http://jscrollpane.kelvinluck.com），但我真的不知道它會做什麼。

感謝您的幫助！

Answer 1

問題1：您可以使用pre或nowrap來防止纏繞。只要你的html結構和css是正確的，你不需要設置一個圖庫寬度。

問題2：您可以使用jQuery中的scrollLeft屬性將元素放入視圖中。你不需要插件。

http://jsfiddle.net/3Tsfv/1

然後使用scrollLeft屬性到下一個元素的動畫進入視野。這個例子不處理邊界情況，所以如果你多次點擊左/右，它會中斷。儘管如此，您應該很容易對其進行修改。

CSS

body { white-space:nowrap; overflow: hidden; padding: 10px; } 
img { margin: 5px; border: 1px solid black; } 
img.active { border-color: orange; } 
div{ position: fixed; }​ 

HTML

<div><button id="left"><-</button><button id="right">-></button></div><br /><br /> 
<img class="active" src="http://placehold.it/500x100/" /><img src="http://placehold.it/750x100/" /><img class="active" src="http://placehold.it/300x100/" /><img class="active" src="http://placehold.it/1000x100/" /> 

jQuery的

$('#left').click(function() { 
    var $prev = $('.active').prev(); 
    $('.active').removeClass('active'); 
    $prev.addClass('active'); 
    $('body').animate({ scrollLeft: $prev.offset().left }, 'slow'); 
}); 

$('#right').click(function() { 
    var $next = $('.active').next(); 
    $('.active').removeClass('active'); 
    $next.addClass('active'); 
    $('body').animate({ scrollLeft: $next.offset().left }, 'slow'); 
}); 
​