Javascript jQuery工具：从容器中流出的可滚动/导航项

我正在使用jQuery工具的可滚动导航器插件

一些有用的链接：

最重要的是：。

到目前为止效果很好。但我希望它的表现有所不同：

我希望图像（或者更确切地说，

中的元素）从可滚动容器（“我的演示”中的

）中“流出”，直到浏览器窗口的右边框。
屏幕分辨率较高的人显然会比分辨率较低的人看到更多的图片/项目流出容器

如果这听起来令人困惑（可能是这样），下面是一些图片：

…然后单击右箭头滚动到下一张图片时：

好吧，我想就这样吧。谢谢你读到这里

---

任何帮助都将不胜感激！提前谢谢

只需去掉

slider

类中CSS中的

width

属性，并指定

margin left

，使其在窗口左侧有一些空间，就像在演示中一样。但显然，您需要调整导航（带有class

next browse

的锚点，使其位于左侧的绝对位置（而不是CSS中的右侧）。对于滑块下方的导航，您只需将其调整为与滑块相同的大小，方法是添加具有相同值的

左侧边距
。
好的，假设您希望数字显示在右侧，但不显示在左侧，并且这是您希望在页面上显示的唯一内容，您的主要问题是不能有
溢出：visible
在右边，但不在左边。像这样假装怎么样：

#wrapper {
    margin: 100px 0 0 100px;
    width: auto; // or rather remove the width 
}
.slider {
    width: auto; // or 100%, or remove the width
}
a.next {
    left: 560; // remove the right: 10px;
}

添加html（在滑块之前添加一个div）：

以下是一个链接：

现在，附加的
div
随包装器一起移动，使其左侧的所有内容都变得模糊。当然，您可以根据需要更改“2000px”。
更新3-（在IE6、IE7、IE8、Chrome、Firefox中测试）

演示：


CSS:

（表示要更改/添加的内容）

这里是我能想到的最好的（对您已经呈现的代码影响很小）

CSS更改

Javascript更改

诚然，它不是即时的（就像它在对象下滚动或在屏幕外滚动），但它以极小的努力实现了您想要做的事情

编辑

添加了overflow-x以移除底部的水平滚动条。观察到在以下情况下工作：


FF4（测试版）
FF3（v3.6.13）
IE8（v8.0.7600.16385）
脉络膜（v8.0.552.224）
有一个问题，即.slider元素居中屏幕是否至关重要

如果没有，您可以这样做：

#wrapper {
    margin: 100px 0 0 100px;
    width: auto; // or rather remove the width 
}
.slider {
    width: auto; // or 100%, or remove the width
}
a.next {
    left: 560; // remove the right: 10px;
}

我认为这就涵盖了它。唯一的问题是你用#wrapper元素的左边距来定义左边有多少空间。
好吧，我觉得这和任何人一样难以相信，但这至少在Chrome中是可行的：

css:

就这样。我现在要看看它是否也适用于其他浏览器

编辑：
当然，IE6/7搞砸了，除非url中有散列。图。添加下面的代码，使其在任何地方都能工作，居中和全部

div#wrapper {
    position: absolute;
    left: 50%;
    margin-left: -300px;
}

这里有一个链接：

编辑2：

为确保在升级浏览器时尽可能长时间地享受内容，请添加以下内容：

div#wrapper {
    top: 10%;
    margin-top: 0;
    overflow-y: auto;
}

我无法从现在的位置编辑联机版本，因此“编辑2”尚未应用于12345_2.html。
可能我在这里没有看到它。您希望它居中？但同时希望滑块项目“流动”从可滚动的容器一直到浏览器窗口的右边框？基本上如果你想这样，它不能被称为“居中”，而是称为“右”对齐。“主布局/容器”将仍然居中，只有滑块中的项目将流出容器。哇，我必须承认这比我的解决方案优雅得多；）然而，按钮似乎在IE中消失。我不知道我的解决方案是否在IE中工作，因为我只在Firebug中尝试过。无论如何，你可能想看看这个。我很高兴，我喜欢我们现在有三种不同的方法。还有一件事：我认为你的包装应该是500px，以免模糊“navi”圈，还说圆应该把容器推到右边一些。@spinymann-tnx完全忘记了navi，现在就修复了！lol@Julie-呃，现在我必须尝试一下：p（同时，感谢测试：））不幸的是，我需要将主要内容（#包装器）居中。哇，你是对的，但我一开始没有看到：当URL中有#散列时，它确实起作用。。。它现在通过应用一些位置来工作：绝对位置；暴力，谢谢。问题是：
溢出：隐藏删除两个滚动条，因此，如果浏览器窗口大小调整，内容将消失（剪裁）。没有办法解决这个问题吗？嗯，您可以添加
overflow-y:auto
，但旧浏览器不接受这一点。您还可以将
#wrapper
设置为
边距顶部：0；排名前10%（或者别的什么）。这样，当你调整大小时，你会看到更多的内容。是的，不幸的是，它应该居中。无论如何，还是要谢谢你。这会产生一个巨大的水平滚动条，但：/Not here，完美无瑕。全屏（普通浏览器）：--JSFIDLE页面：--也适用于FF、IE、Chrome。但从未测试过Opera或其他网站。很抱歉，请使用以下链接：&（CSS的小更新以显示您的导航项目符号。鉴于这是一个非链接网站，我必须明确引用您的图像[希望您不介意：grin:]）仍然有一个巨大的水平滚动条（可能您一开始没有看到，因为滑块确实是ti
// Add in the .Scrollable({ ... }) tag
onSeek: function(o,e){
  $('.items').children().css('visibility','');
  $('.items').children().filter(':lt('+e+')').css('visibility','hidden');
}

#wrapper {
    margin: 100px 0 0 100px;
    width: auto; // or rather remove the width 
}
.slider {
    width: auto; // or 100%, or remove the width
}
a.next {
    left: 560; // remove the right: 10px;
}

body, html {
    overflow: hidden;
}
.slider {
    width: 6000px;
}
.next {
    left: 560px;
}

div#wrapper {
    position: absolute;
    left: 50%;
    margin-left: -300px;
}

div#wrapper {
    top: 10%;
    margin-top: 0;
    overflow-y: auto;
}