1

我正在建立这个网站，关于这个页面我基本上有两个问题： http ://sites.publishyours.com.br/silviamecozzi/pt/obra/deserto_das_palmas.php

在链接上，您会看到一些具有不同尺寸的“将是”图像，并且是图例。其中一些图像将宽至 1700px+，这是第一个问题和问题。

检查 html 和 css，您会看到一个 id 为“gallery”的 div，其中包含所有图像。它是绝对定位的，我将其宽度设置为 4800 像素（不足以容纳所有向左浮动的图像。如果将此宽度更改为 5000 像素，则足以容纳所有图像，一切都会好起来的应该是这样，但是……

问题01：为什么要设置div#gallery的宽度？我会有其他类似的部分，具有不同的图像/尺寸，我无法预览它需要多宽。我只是希望它尽可能宽，如果我以后需要添加更多图像，我希望它可以根据需要将它推到尽可能宽的位置。

问题02：首先注意我如何将“画廊”div的左侧位置设置为-150px。好吧，一旦我解决了第一个问题，我可能会将“html”标签设置为 {overflow-x:hidden; }。并使用与网站一样宽的水平滚动（+- 920px），就在图像的正下方，我希望图像从“隐藏的右侧”滚动（使用 jQuery 滚动），例如 { left: 0px; } 到“隐藏的左侧”，例如 { left: -3980px; } 的浏览器，反之亦然，因为用户使用滚动...此滚动将需要计算#gallery div 的宽度和所有...有人可以指点我一个 jQuery 插件来帮助我做到这一点? 我正在考虑 jscrollpane (http://jscrollpane.kelvinluck.com)，但我真的不知道它是否可行。

谢谢您的帮助！

4

1 回答 1

3

问题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');
});
​
于 2012-04-06T03:22:49.697 回答