重新排列js以提供更大的灵活性

我该如何让这个js只影响原始悬浮元素的子元素，而不会给出所有单个.g_scroll或.left/.right标记的id？重新排列js以提供更大的灵活性

function loopRight(){ 
     $('.g_scroll').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopRight); 
    } 

    function loopLeft(){ 
     $('.g_scroll').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopLeft); 
    } 

    function stop(){ 
     $('.g_scroll').stop(); 
    } 


    $('#right').hover(function() { 
    loopRight().children(); 
    },function() { 
    stop(); 
    }); 

    $('#left').hover(function() { 
    loopLeft(); 
    },function() { 
    stop(); 
    });

的jsfiddle为（混乱的，而且是必要的）HTML结构：https://jsfiddle.net/6rbn18cL/

为了演示如何必须被重新命名：https://jsfiddle.net/z9u3azqy/

来源

2017-06-20 Scott

所以在这里，我 “合并” 两个箭头处理程序。
然后，根据要滚动的宽度确定“滚动”速度需要进行计算，该滚动宽度可能不总是元素宽度的100％。

该脚本允许您轻松确定100％滚动的速度。
然后，它计算速度，如果已经有一个距离滚动。

$(document).ready(function(){ 

    function moveit(arrow){ 

    // Adjust you delay here 
    var delay = 2000; // delay to scroll 100% 
    var animationDelay; 

    var slider = arrow.siblings(".g_scroll"); 
    var distance = slider.width(); 
    var scrolled = slider.scrollLeft()+1; // +1 is to avoid infinity in the math below 

    if(arrow.hasClass("scroller_l")){ 
     distance = -distance; 
     animationDelay = -distance * (-distance/delay)*(-distance+scrolled); 
    }else{ 
     animationDelay = distance * (distance/delay)*(distance-scrolled); 
    } 

    slider.stop().animate({scrollLeft:distance}, animationDelay, 'linear'); 
    } 

    function stop(arrow){ 
    arrow.siblings(".g_scroll").stop(); 
    } 


    $('.scroller_l, .scroller_r').hover(function(){ 
    moveit($(this)); 
    },function() { 
    stop($(this)); 
    }); 

}); // ready

CodePen

- 第一个answer--

首先，你不能使用相同的id不止一次。
所以我从你的HTML中删除了id="left"和id="right"。

现在的诀窍是通过使用$(this)将箭头悬停到您的功能。
并找到.g_scroll元素是它的兄弟姐妹。

$(document).ready(function(){ 


    function loopRight(arrow){ 
    arrow.siblings(".g_scroll").stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopRight); 
    } 

    function loopLeft(arrow){ 
    arrow.siblings(".g_scroll").stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopLeft); 
    } 

    function stop(arrow){ 
    arrow.siblings(".g_scroll").stop(); 
    } 


    $('.scroller_r').hover(function(){ 
    loopRight($(this)); 
    },function() { 
    stop($(this)); 
    }); 

    $('.scroller_l').hover(function(){ 
    loopLeft($(this)); 
    },function() { 
    stop($(this)); 
    }); 

});

CodePen

来源

2017-06-20 15:41:37

这看起来不错！现在唯一的问题是悬停被过早地触发 - 任何想法？ – Scott

它滚动+或 - 20像素...您可以将其设置为滑块宽度，如[CodePen v2]（https://codepen.io/Bes7weB/pen/yXbaYY?editors=0010） –

几乎完美！现在每次滚动一定数量时，速度都会重置。即当剩余的滑块宽度缩短时，调整速度。在循环20px之前 - 是否有办法复制这种行为？ – Scott

可以传递事件对象，并从那里找到合适的容器。

$('.scroller_l').hover(loopRight, stop); 
$('.scroller_r').hover(loopLeft, stop);

这是你传递的功能，如上面的参数自动完成。

要动态地找到滚动容器每个可以使用类容器相对于发现当前的目标实例：

var el = $(ev.currentTarget), 
    parent = el.closest('.country_holder'), 
    container = parent.find('.g_scroll');

看到一个工作示例here。

此时，您可以问自己loopRight和loopLeft是否可以组合在一个函数中。唯一的区别是' - = 20'和'+ = 20'。使用多态可以进一步重构这个。

来源

2017-06-20 16:04:11

重新排列js以提供更大的灵活性

回答

相关问题