2012-04-06 127 views
1

我建立這個網站,我基本上都在此頁兩個問題: http://sites.publishyours.com.br/silviamecozzi/pt/obra/deserto_das_palmas.php5000px +寬水平滾動?

上的鏈接,你會看到大小不同的一些「會」的圖像和它的傳說。 這些圖像中的一部分寬度將會高達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),但我真的不知道它會做什麼。

感謝您的幫助!

回答

3

問題1:您可以使用prenowrap來防止纏繞。只要你的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'); 
}); 
​ 
+0

韓國社交協會您的時間和如此有用的答案! 我剛剛在CSS中解決了使用'nowrap;'的Q-01問題,我在這裏首先給出了「反饋」。 以下是檢查結果的測試頁面: [示例](http://sites.publishyours.com.br/silviamecozzi/pt/test。html) 我必須做一些測試,這裏是我基本上必須使用的: '#gallery {white-space:nowrap; } _div保存所有數字標記_ 'figure {display:inline-block; }'_it沒有inline_ 現在我必須解決jQuery部分。需要水平滾動條,因爲有些imgs會非常寬。一個簡單的點擊btn不會做它 – rafaelbiten 2012-04-06 16:34:45

+0

只是爲了更好地解釋爲什麼btns不會爲imgs導航,我會用你自己的[jsfiddle例子](http://jsfiddle.net/3Tsfv/1) 。 當你到達1000px寬的img時,如果用戶有一個小窗口,他將無法看到圖像的右側,當用戶點擊右邊的btn時,img的速度非常快,以至於他/她仍然無法看到img的細節。這就是爲什麼需要滾動條的原因。用戶可以選擇以他想要的方式查看圖片。我甚至可以稍後添加btns,但滾動條真的很需要。任何想法?並再次感謝! – rafaelbiten 2012-04-06 16:52:37

+0

用overflow-x屬性將圖像容器設置爲100%然後? http://jsfiddle.net/3Tsfv/2/ – mrtsherman 2012-04-06 17:33:47