我正在尝试在网站底部设置徽标动画。我希望它们在屏幕左侧消失,然后循环并重新出现在屏幕的右侧。类似于自动收报机,但最后没有死白色空间。我可以使它几乎在jsfiddle中工作(除非它调整屏幕大小时调整),它在我的实际项目中根本不起作用。
http://jsfiddle.net/yoda_wookie/jm7w0jf8/1/
$(function(){
var scroller = $('#logo-ticker div.footer-logo-slider');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);
});
我还在学习jQuery并且真的在努力解决这个问题。任何帮助将不胜感激:)