jQuery 水平滚动(点击和动画)

Posted

技术标签:

【中文标题】jQuery 水平滚动(点击和动画)【英文标题】:jQuery Horizontal Scrolling (click and animate) 【发布时间】:2012-11-06 10:48:16 【问题描述】:

我有一系列在水平线上浮动到无穷大的 div。我有一个固定宽度的 div 容器,溢出:隐藏。最终,我想按左右的 div/按钮来滚动项目(与使用滚动条相比)。

我无法让 .animate() 工作。我希望每次点击都能将列表中的项目移到上面。

它应该类似于亚马逊的“购买此商品的客户也购买了”列表,您可以以相同的方式滚动浏览。我很想尝试使用 .mousedown 并让它在按住时移动(类似于真正的滚动),但我想先做这个更简单的方法。

这里是小提琴和代码:

http://jsfiddle.net/stfzy/16/

html

<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
    <div class='list'>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class="item">
        </div>
    </div>
</div>

CSS:

 #container
width:340px;
    height:50px;


#list-container 
overflow:hidden;    
width: 300px;  
float:left;    


.list
    background:grey;
min-width:700px;
    float:left;



#arrowR
background:yellow;
    width:20px;
    height:50px;
    float:right;
    cursor:pointer;



#arrowL
background:yellow;
    width:20px;
    height:50px;
    float:left;
    cursor:pointer;


.item
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;

jQuery

$(document).ready(function() 

    $('div#arrowR').click(function()

        $('div.item').animate('left':'-=300px');

    );

    $('div#arrowR').click(function()

        $('div.item').animate('left':'+=300px');

    );

);

任何和所有的帮助表示赞赏。谢谢!

【问题讨论】:

【参考方案1】:

position:relative 添加到.item,如下所示:

.item
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Put me here! */

工作示例:http://jsfiddle.net/mattblancarte/stfzy/21/

您的设置中还有一些错误,但这应该会让您摆脱困境。 :)

编辑::

这里有一个快速解决方案来解决列表在任一方向上滑动太多的错误:

$(document).ready(function() 

    var $item = $('div.item'), //Cache your DOM selector
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)

    $('div#arrowR').click(function()
        if(index < endIndex )
          index++;
          $item.animate('left':'-=300px');
        
    );

    $('div#arrowL').click(function()
        if(index > 0)
          index--;            
          $item.animate('left':'+=300px');
        
    );

);

【讨论】:

太棒了!我明白你对更多错误的意思......我假设你指的是我的列表有一个开始和结束的事实。但是,它需要循环才能有效工作。嗯……是时候弄清楚那个了。再次感谢。 或者,当没有更多内容时,也许我会禁用箭头按钮...这可能是一个更好的选择。 @jstacks 乐于助人!如果您还没有弄清楚,您可以通过分配 0 的起始索引来跟踪滚动的位置,然后根据列表中的项目数计算最大索引。如果您按了最小值,请禁用左键。如果达到最大值,请禁用右键。希望这是有道理的!这不是解决问题的唯一方法,但它是一种解决方案。 :) 我对 jQuery 不太擅长,所以我还没有弄清楚。这真的很有帮助,谢谢!您能否让我参考有关索引的文档?我不太确定它是如何工作的。另外,让它循环回到第一组的方法是什么?不确定这是否更困难,但很好奇这两种选择最终看起来如何...... @jstacks 不用担心。确实没有任何关于如何执行此操作的文档。您可能会通过谷歌搜索找到它,但我只是继续为您构建了一个解决方案。 Check out this fiddle。如果您对它的工作原理有任何疑问,请告诉我!

以上是关于jQuery 水平滚动(点击和动画)的主要内容,如果未能解决你的问题,请参考以下文章

IE和FF中的Jquery动画scrollLeft错误

如何在jQuery中无限水平滚动图像?

Jquery - 动画滚动对角线,野生动物园不工作,镀铬滞后

如何让jquery动画效果在屏幕滚动到指定位置才执行

使用水平滚动处理 React 动画

jQuery 滚动动画简单版