1

私はこのウェブサイトを構築していますが、このページについて基本的に2つの質問があります： http ：//sites.publishyours.com.br/silviamecozzi/pt/obra/deserto_das_palmas.php

リンクには、さまざまなサイズの「予定」の画像とその凡例が表示されます。この画像の一部は1700px以上の幅になり、最初の問題と質問があります。

htmlとcssを確認すると、すべての画像を保持している「gallery」のIDを持つdivが表示されます。絶対位置で、幅を4800pxに設定しています（すべて左に浮いているすべての画像を保持するには不十分です。この幅を5000pxに変更すると、すべての画像を保持するのに十分であり、すべてが正常になりますあるべきですが...

質問01：なぜdiv＃galleryの幅を設定する必要があるのですか？そのような他のセクションにさまざまな画像/サイズがあり、どのくらいの幅が必要になるかをプレビューすることはできません。必要なだけ広くしたいのですが、後で画像を追加する必要がある場合は、必要なだけ広くしたいと思います。

質問02：最初に、「ギャラリー」divの左側の位置を-150pxに設定する方法に注意してください。最初の質問を解決したら、おそらく「html」タグを{overflow-x：hidden;に設定します。}。そして、ウェブサイトと同じ幅（+-920px）で、画像のすぐ下にある水平スクロールを使用します。画像を「非表示の右」から{left：0px; }を「隠された左」に{左：-3980px; }ブラウザの}、またはその逆、ユーザーがスクロールを使用するとき...このスクロールは#gallerydivとすべての幅を計算する必要があります...誰かが私にそれを行うのに役立つjQueryプラグインを教えてもらえますか？私はjscrollpane（http://jscrollpane.kelvinluck.com）について考えていますが、それがうまくいくかどうかは本当にわかりません。

助けてくれてありがとう！

4

1 に答える 1

3

質問 1:ラップを使用しpreたり、防止したりできます。nowrapHTML 構造と 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');
});
​
于 2012-04-06T03:22:49.697 に答える