[英]Continuous/infinite horizontal scroll on hover
I have a shelf which when you hover the left or right buttons scrolls left and right. 我有一个书架,当您将鼠标悬停在该按钮上时,它会左右滚动。 However, at the moment this only scrolls a defined amount.. and this shelf will be populated via lazy loading, so there is no real way of knowing how wide the shelf is.
但是,目前,这仅滚动了一个定义的数量。并且该货架将通过延迟加载进行填充,因此没有真正的方法可以知道货架的宽度。
Sure, I could set the number to 99999999 and the animation speed to a similarly high number, but surely there's a smarter way to do it? 当然,我可以将数字设置为99999999,将动画速度设置为类似的高数字,但是肯定有更聪明的方法吗? Without plug-ins!
没有插件!
Thanks for the help.. 谢谢您的帮助..
$('.scroll-arrow').each(function(){
var modifier = ($(this).hasClass('right')) ? 1 : -1;
var sib = ('.shelf-slide');
var sl = 0;
$(this).hover(function() {
sl = $(this).siblings(sib).scrollLeft();
$(this).siblings(sib).stop();
$(this).siblings(sib).animate({scrollLeft: sl + (modifier * 1000)}, 5000, 'linear');
}, function() {
$(this).siblings(sib).stop();
});
});
you can create a function to keep animating while you hover the arrow like this 您可以创建一个函数来保持动画,同时将鼠标悬停在这样的箭头上
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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.