jQuery悬停时无限/连续滚动

jQuery infinite/continuous scrolling on hover

本文关键字：连续滚动无限悬停 jQuery 更新时间：2023-09-26

我似乎在边缘滚动解决方案附近悬停时遇到了一些问题，我已经实现了拖动滚动解决方案。

这是我的代码：

演示1（当前页面）：http://jsfiddle.net/SO_AMK/FdLZJ/

演示2（我尝试过的）：http://jsfiddle.net/SO_AMK/8CCeA/

HTML摘录：

<section class="row">
        <div class="scroll-left" style="opacity: 0;"></div>
        <div class="row-scroll">
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
            .....
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
        </div>
        <div class="scroll-right" style="opacity: 0;"></div>
    </section>
    <section class="row">
        <div class="scroll-left" style="opacity: 0;"></div>
        <div class="row-scroll">
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
            .....
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
        </div>
        <div class="scroll-right" style="opacity: 0;"></div>
    </section>

jQuery:

    $(document).ready(function () {       
        var pos = 5;
        $.fn.loopingScroll = function (direction, scrollElement) {
            if (direction == "right") {
                pos+=5;
            }
            else if (direction == "left") {
                pos-=5;
            }
            $(scrollElement).parent().scrollLeft($(scrollElement).parent().data('scrollLeft') + pos);
            return this;
        }
        $(".scroll-left").hover(function(){
        scrollLeftLoop = setInterval(function(){ 
            $(this).loopingScroll("left", this); 
            }, 25);
            $(this).fadeIn('fast');
        }, function() { clearInterval(scrollLeftLoop); $(this).fadeOut('fast'); });
        $(".scroll-right").hover(function(){
           scrollRightLoop = setInterval(function(){ 
              $(this).loopingScroll("right", this); 
          }, 25);
            $(this).fadeIn('fast');
        }, function() { clearInterval(scrollRightLoop); $(this).fadeOut('fast'); });
});

它应该是一个Pulse替代品/WebApp，因此设计（我正在设计字体）。

有什么想法吗？

提前谢谢。

好吧，经过一番思考，我想出了这个：

$(".scroll-left").hover(function() {
    $(this).parent().animate({scrollLeft: 0}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});
$(".scroll-right").hover(function() {
    $(this).parent().animate({scrollLeft: $(this).siblings(".row-scroll").width()}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});

它基本上使用scrollLeft函数，并实时计算滚动元素的宽度，用作滚动到值。下面是一个演示此代码的JSFiddle。

我希望有人对此有用，我正在适当地重命名这个问题。

我知道为时已晚，但如果其他人需要帮助，他们可以找到解决方案。尝试动画循环

function loopl(){
    $('.mCSB_container').animate({ "left": "+=80px" }, "800", 'linear', loopl  );
}        
function loopr(){
    $('.mCSB_container').animate({ "left": "-=80px" }, "800", 'linear', loopr  );
}
function stop(){
    $('.mCSB_container').stop();
}
$( "#left" ).hover(loopl, stop);
$( "#right" ).hover(loopr, stop);