Javascript 悬停时连续/无限水平滚动
我有一个架子,当你悬停在左边或右边的按钮时,它会左右滚动。然而,目前这只会滚动定义的数量。。这个架子将通过延迟加载来填充,因此没有真正的方法知道架子有多宽 当然,我可以将数字设置为9999999,动画速度设置为同样高的数字,但肯定有更聪明的方法吗?没有插件 谢谢你的帮助Javascript 悬停时连续/无限水平滚动,javascript,jquery,html,css,math,Javascript,Jquery,Html,Css,Math,我有一个架子,当你悬停在左边或右边的按钮时,它会左右滚动。然而,目前这只会滚动定义的数量。。这个架子将通过延迟加载来填充,因此没有真正的方法知道架子有多宽 当然,我可以将数字设置为9999999,动画速度设置为同样高的数字,但肯定有更聪明的方法吗?没有插件 谢谢你的帮助 您可以创建一个函数,在像这样悬停箭头时保持动画效果 function animatecontent(ele,modifier){//function to scroll var sl = ele.scrollLeft();
您可以创建一个函数,在像这样悬停箭头时保持动画效果
function animatecontent(ele,modifier){//function to scroll
var sl = ele.scrollLeft();
//120 should be the width of the ".content" and 500 the time to scroll 1 ".content"
ele.animate({scrollLeft: sl + (modifier * 120)}, 500, 'linear',function(){
if(hover){//on callback if it is still hover call the same function
animatecontent(ele,modifier);
}
});
};
var hover=false;
$('.scroll-arrow').each(function(){
var modifier = ($(this).hasClass('right')) ? 1 : -1;
var sib = ('.shelf-slide');
$(this).hover(function() {
hover=true;
$(this).siblings(sib).stop();
animatecontent($(this).siblings(sib),modifier);//pass the element to animate and the modifier
}, function() {
hover=false;
$(this).siblings(sib).stop();
});
});
像这样的吗?完美的干得好。如果你的回答是我会接受的。谢谢你的解释。
function animatecontent(ele,modifier){//function to scroll
var sl = ele.scrollLeft();
//120 should be the width of the ".content" and 500 the time to scroll 1 ".content"
ele.animate({scrollLeft: sl + (modifier * 120)}, 500, 'linear',function(){
if(hover){//on callback if it is still hover call the same function
animatecontent(ele,modifier);
}
});
};
var hover=false;
$('.scroll-arrow').each(function(){
var modifier = ($(this).hasClass('right')) ? 1 : -1;
var sib = ('.shelf-slide');
$(this).hover(function() {
hover=true;
$(this).siblings(sib).stop();
animatecontent($(this).siblings(sib),modifier);//pass the element to animate and the modifier
}, function() {
hover=false;
$(this).siblings(sib).stop();
});
});