无限平滑水平滚动没有插件?

我想创建一个无限的侧滚动div,而不使用额外的插件(除了jQuery)。 我找到了这个:http://www.smoothdivscroll.com/

问题不仅是它自己的插件,它还利用jqueryUI ...添加一堆代码重量。

这是我的

<div id="columnWrapper">
    <div id="columnSlider">
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
    </div>
</div>

对于javascript,我有一个计时器设置为每10毫秒,每次处理#columnScroll的左边距几个像素。

var sliderInt=self.setInterval(function(){
    $('#columnSlider').css('margin-left',totalMargin);
    totalMargin -= .5;
},10);

我真正需要的是#columnSlider的左侧和同一个div的右侧,一旦左侧离开屏幕就会结束(这样它就会无限滚动)。

提前致谢


你可以尝试这样的事情,它实际上是一个我为了重用而编写的插件,但你可以像下面那样将它从插件形式中取出,你只需要添加正确的元素并更改元素引用,我认为这是当前的垂直滚动,但 - 易于更改:

function initInfiniteScroll(){
var $carousel, $prevTrigger, $nextTrigger, itemHeight;
    $carousel = $('#alternate-views');
    $prevTrigger = $('.scroll-up');
    $nextTrigger = $('.scroll-down');
    itemHeight = 106;
    $allItems = $carousel.children().clone();
    $allItems.appendTo($carousel);
    $allItems.prependTo($carousel);

    $prevTrigger.click(function() {
        scrollCarousel('up');
        return false;
    });
    $nextTrigger.click(function() {
        scrollCarousel();
        return false;
    }); 

    function scrollCarousel(direction) {
        if (direction == 'up')
        {
            $carousel.animate({
                'top': '+=' + itemHeight
            },1000,function(){
                $carousel.children(':last').clone().prependTo($carousel);
                $carousel.children(':last').remove(); 
                $carousel.css({'top':'-' + itemHeight + 'px'});
            });
        }
        else
        {
            $carousel.animate({
                'top': '-=' + itemHeight
            },1000,function(){
                $carousel.children(':first').clone().appendTo($carousel);
                $carousel.children(':first').remove();  
                $carousel.css({'top':'-' + itemHeight + 'px'});
            });
        }
    }
}

这确实克隆了整个负载并将它放在原始滚动条的任一侧 - 但是您可以删除它,如果您使用的是jquery 1.4以上版本,则可以删除克隆并在您滚动时分离并重新添加项目。

另外 - 如果你想做一个setTimeout,只需使用click函数的内容并在其周围放置一个计时器即可。 希望这可以帮助。

链接地址: http://www.djcxy.com/p/8743.html

上一篇: Infinite smooth horizontal scroll without a plugin?

下一篇: Generic Type toArray and asList