Tag: 水平滚动
将上一个/下一个按钮添加到针对DIVS的水平内容滚动条
我已经为div上的一些滚动实现了jQuery Custom Scroller ，这非常有用。 我甚至使用平滑滚动来水平滚动到某些DIV但我的问题是我想要一个下一个和上一个导航按钮，我无法在任何地方找到它。 下面是我的HTML和jQuery。 先谢谢 the cedarburg CSS： #source-container{ overflow-x: hidden; overflow-y: hidden; } .source-item{ float: left; display: inline-block; background-repeat:no-repeat; background-size:cover; background-position: center; -moz-background-size: cover; } #source-container .one{background-image:url(images/source/1-the-cedarberg.jpg);} #source-container .two{background-image:url(images/source/2-the-cedarberg.jpg);} #source-container .three{background-image:url(images/source/3-the-cedarberg.jpg);} #source-container .four{background-image:url(images/source/4-the-cedarberg.jpg);} #source-container .five{background-image:url(images/source/5-the-cedarberg.jpg);} #source-container .six{background-image:url(images/source/6-the-cedarberg.jpg);} #source-container .seven{background-image:url(images/source/2-our-farm.jpg);} #source-container .eight{background-image:url(images/source/1-our-farm.jpg);} #source-container .nine{background-image:url(images/source/3-our-farm.jpg);} #source-container .ten{background-image:url(images/source/4-our-farm.jpg);} #source-container .eleven{background-image:url(images/source/1-our-rooibos.jpg);} #source-container .twelve{background-image:url(images/source/6-the-cedarberg.jpg);} #source-container .thirteen{background-image:url(images/source/1-the-cedarberg.jpg);} #source-container […]
水平滚动布局左/右：jQuery / CSS测验
看来，我想要实现的目标几乎是不可能的。 我试图创建一个依赖于jQuery的水平布局 ，但即使关闭Javascript也可以使用。 我还希望保留最清晰的代码并保持其语义值。 所以我想我正在寻找终极解决方案。 🙂 网络上最常见的水平布局是： http ： //www.queness.com/resources/html/scroll/horizontal.html – 这将是完美的（即使关闭JS也能正常工作）。 我的问题是我需要让它“双向”工作（左右两侧带有“开始”项目）。 效果应该类似于： http ： //steveandjacqs.com/网站（和编码后端）很棒，但没有JS它就无法使用，而且代码充满了黑客攻击。 我的CSS： html,body { overflow: hidden; } .wrapper { position: relative; width: 100%; height: 100%; } .wrapper-cont { position: relative; width: 500%; height: 100%; margin-left: -200%; } #item-left { position: absolute: top: 0px; left: 0%; } #item-home { position: […]
HTML / jQuery表：水平滚动，修复第一个（左）列
我有一个表格，显示一列测试名称，其中包含几个（无限数量）与测试相关的各种测试数据列。 由于会有几组数据，我想限制可以看到的数量，并让用户能够水平滚动显示/隐藏不同的数据集。 Jquery表列滑动效果的接受答案具有我正在寻找的那种滑动效果，但是如何修复最左边的名称列？ 有很多数据，所以我不想克隆两个表，正如互联网上其他地方所建议的那样。 为名称创建一个固定表，为数据结果创建一个可滚动表，但行高在可接收的数据量上是可变的（单元格中可能有多行文本），因此对齐将被抛弃。 另外，我不想要默认的Internet滚动条。 我有左/右箭头图像，我将用它来控制滚动，就像我上面发布的示例。 我花了大约4个小时在StackOverflow和互联网的其余部分寻找答案，但我还没有发现任何合适的东西…任何帮助将不胜感激，谢谢！ 编辑：绝对定位左列导致表的其余部分左移到左列下方（隐藏第一列数据）。 添加与第一列具有相同内容的“镜像”列可以正常工作; 问题是，当数据列的单元格高于相应的名称单元格时，绝对定位的名称单元格无法看到该事实并自行resize。 思考？
jQuery Mobile是否相当于Android的ViewPager？
我想使用jQuery Mobile创建水平滑动效果。 经过一些研究后，我发现ViewPager （通常位于Android Market的应用详细信息页面中） ViewPager我的需求。 在指定的页面中，作者将其与Android中的代码一起描述，但我想知道jQM中是否存在等效的插件或function。
固定位置div仅垂直
我有一个当前的网页构建，右侧边栏是固定位置。 我试图从右边定位，但不希望它与其他div内容重叠。 我正在寻找的是当内容超出视口窗口时，将内容水平向右滚动。 任何帮助将不胜感激。 与此类似： http ： //demo.rickyh.co.uk/css-position-x-and-position-y/但是我不能让这个工作。 这已通过替代方法解决。 感谢那些真正考虑过帮助的人。
Bootstrap 3水平可滚动行网站设计
我正在尝试使用bootstrap 3创建一个水平滚动网页。 这是我到目前为止所尝试的。 @media (min-width:768px) { .container { width:100%; } #main-content{ min-height: 100%; height: auto; } #main-content > .row { overflow-x:scroll; overflow-y:hidden; } #main-content > .row [class*=”col-lg”], #main-content > .row [class*=”col-md”], #main-content > .row [class*=”col-sm”] { float:left; } 我尝试了在这个线程中提到的jquery方法，但是即使在将宽度设置为row类之后它也不滚动， 这里显示的是col-lg类。 我还尝试通过获取col-lg- height的高度来设置高度到row类，但仍未成功 。 我想要达到的目标是： col-lg-，col-md-和col-sm-类应该用它各自的宽度内容滚动。 列数可能会根据数据而有所不同。 在col-xs中，默认行为没有变化。 http://jsfiddle.net/ravimallya/7kCTD/3/这是工作场所。 有人可以建议一个解决方法吗？ css，jquery
容器内的水平滚动
我是javascript的新手，我正在尝试创建一个水平滚动div： – 的jsfiddle 你可以看到菜单链接转到每种颜色，但我想把它放在一个250x250px的容器中，所以只有1种颜色可见，然后你点击任何一个链接，它滚动到那种颜色。 希望有人可以帮助我一些指示。 谢谢！ jQuery(document).ready(function ($) { $(“.scroll”).click(function (event) { event.preventDefault(); $(‘html,body’).animate({ scrollLeft: $(this.hash).offset().left }, 200); }); }); .container { white-space: nowrap; } .child-element { min-width: 250px; display: inline-block; height: 250px; } .child1 { background-color: purple; } .child2 { background-color: orange; } .child3 { background-color: black; } .child4 { background-color: green; } .child5 […]
CSS水平滚动溢出与jQuery滑块
我正在尝试设置全屏jquery滑块。 我把项目分成了两个步骤：1）css和2）js。 1）CSS ，下面是我正在拍摄的照片（没有固定的高度），下面是我到目前为止无法使用的代码。 例子http://i43.tinypic.com/a1ocxj.jpg /* Positioning */ #container { width: 2500px; } .block { display: inline; } /* Styling */ .block img { padding: 5px; } 2）Javascript ，使用jquery我喜欢在点击它们时向左滑动div …如果可能的话就像jQuery Coda Slider一样。 谢谢，任何帮助表示赞赏。
尝试创建无限水平滚动 – 最好使用jquery插件
我希望创建一个像“The Killers”网站上使用的效果： http ： //www.thekillersmusic.com/html5# 。 网站编码的复杂性超出了我的范围 – 但就像它的工作方式一样。 基本上，想要像水平全景背景那样我可以放置网页内容。 （我发现了一个很棒的全景jquery插件，但它就像一个大图像）。 然后我找到了这个网站： http ： //unfold.no/ – 它似乎有无限的垂直滚动 – 正是我正在寻找的function类型 – 但如果我能弄明白他们是如何做到的，那就该死了。 他们可能会以某种方式使用Google Map API吗？ 或者从头开始编写自己的代码？ 我对jquery不是很好，所以如果可能的话，我更喜欢一个可以调整的插件。 任何想法将不胜感激。 谢谢 ：）
jQuery jqGrid是否支持水平滚动条和冻结列？
我有一个包含很多列的jqGrid ，当列宽的总和大于固定宽度容器时，它会显示如下： 如果网格的宽度太大，则不要使用水平滚动条。 如何获得jQgrid的水平滚动条，以便有一个固定的最大网格大小，如果我添加更多列，它将只是滚动？ 此外，假设这是可能的，你可以冻结前几列吗？
