Question

我想像Apple一样构建一个滑块：http://www.apple.com/30-years/

我不知道如何在上面的链接上滚动鼠标悬停。我知道我必须将translateX值减少X，但X是什么？：）

// scroll animation
function scrollAnimation(){
$('ul').css({
'transform' : 'translateX(-' +mouseX+ 'px)'
});
scrollAnimation();
}

我想连续滚动图像，速度取决于鼠标的位置。

以下是我的完整代码：http://jsfiddle.net/M8cnV/light/

我是新来的，所以感谢您对我的代码提出任何意见。

Answer 1

以下是我提出的建议：

http://jsfiddle.net/5nTpS/

我添加了一些新变量来跟踪光标的左边缘或右边缘的距离，滚动的方向以及滚动的速度：

var scrollSpeed = 0;
var hotEdgeWidth = 200;
var animationSign = "-";

并修改了你的mousemove功能，以便在光标足够靠近你希望图像滚动的容器的左边或右边，你希望它们滚动到哪个方向，以及你想要它们有多快时滚动：

$(container).mousemove(function(e) {
    if(e.pageX > $(this).width() - hotEdgeWidth){
        scrollSpeed = hotEdgeWidth - ($(this).width() - e.pageX);
        animationSign = "-";
    }
    else if(e.pageX < hotEdgeWidth){
        scrollSpeed = hotEdgeWidth - e.pageX;
        animationSign = "+";
    }
    else{
        scrollSpeed = 0;
    }
    scrollAnimation();
    }).mouseout(function(e){
         scrollSpeed = 0;
});

然后，更改scrollAnimation以使用.animate函数，并添加一个完整的函数，以在动画完成后再次调用scrollAnimation函数。只有在没有动画发生时才会动画，以防止反馈循环发生：

function scrollAnimation(){
    if (!$('li').is(':animated')){                
        $( "li" ).animate({ 
            "left": animationSign + "="+scrollSpeed+"px" 
        },
        500,
        function(){
            scrollAnimation();
        });
    }
}

鼠标悬停的Apple时间轴样式滚动

1 个答案: