【问题标题】:jQuery div page slider off the screen, without a horizontal browser scrollbarjQuery div 页面滑块离开屏幕,没有水平浏览器滚动条
【发布时间】:2010-05-13 21:51:35
【问题描述】:

我正在寻找一个 jQuery div 滑块插件,它可以水平滑出页面,打开的浏览器窗口越大,显示的 div 越多。我喜欢 jQuery Coda Slider... 只需要它是整页,不隐藏溢出,不显示水平浏览器滚动条。

有什么建议吗?

更新: 下面是我想要得到的一个例子。基本上,这是两个步骤。 css和js。第一步,css,我正在寻找一个没有固定高度的水平 div 页面滚动。第二步,js,我希望让 div 像 jQuery Coda Slider 一样滑动。

【问题讨论】:

  • 滑出页面,不隐藏溢出,不显示水平滚动条?我无法想象那将如何运作。为什么不隐藏溢出?
  • 想象一个 700px 宽的左边距布局并且用户的浏览器打开到 1000px 宽。滑块中的下一个 div 将部分显示在浏览器中,尽管它是不透明的且可选择的,允许幻灯片以这种方式进行。如果用户重新调整他们的浏览器窗口......下一张幻灯片或多或少会显示。 (上一张幻灯片没有显示。)我知道它非常具体,但想知道是否有类似的东西可以从那里开始。 (我保证,我会接受最好的回应。)

标签: jquery html jquery-plugins slider


【解决方案1】:

我仍然不知道我是否完全理解。一些代码会很好。

无论如何,您似乎希望浏览器显示的边缘切断下一张幻灯片的页面之外的任何部分。

如果正确,只需在 body 标记或您使用的任何与窗口宽度相同的容器标记上将 overflow-x 设置为隐藏即可。

(除非出于某种原因,您不想隐藏。)

           // If your content is in a container that is sized to the width
body {     //    of the body, then use that instead.
    clip: auto;
    overflow-x: hidden;
}

更新:(来自重新发布的信息)

风格:

body {
            clip: auto;
            overflow-x: hidden;
        }

     /* Positioning *
        #container { width: 2500px; }
        .block { float: left; }

        /* Styling */
        .block img { padding: 5px; }​

html:

<body>
<div id="container">
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
</div>
</body>

【讨论】:

  • 这不起作用,请参阅我上面的更新后的图片。
  • 你知道div元素的宽度吗?它们是向左浮动的吗?您需要确保灰色容器的宽度大于 div 元素的组合宽度。
  • 我用一个html示例和更清晰的问题解释重新发布了这个问题,如果你有时间,请检查一下。谢谢。 stackoverflow.com/questions/2851126/…
  • 我会在这里回答,因为通常不建议在 stackoverflow 上重新发布。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-03-23
  • 2016-11-16
  • 1970-01-01
  • 2012-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-12-12
相关资源
最近更新 更多