Question

我有这个javascript代码，根据鼠标位置滚动div。

我已经让代码工作了，问题是它有点紧张。我想知道是否有人可以给我关于如何优化它的建议，以便它顺利运行！

要查看代码，请访问我的jsfiddle：

Answer 1

我意识到我对此已经走得太远了，解决方案很简单。

您可以根据EXACT鼠标位置计算新的滚动位置...代码跟随：

$(window).load(function(){
    var container = $("#PortfolioReel");
    var elem = $("#PortfolioReel div");
    var max_pos = container.width();
    var max_scroll = elem.width() - max_pos;
    var differential = max_scroll / max_pos;
    $("#PortfolioReel").mousemove(function(e){
        var pos = (e.pageX - this.offsetLeft) + 1;
        var scr = Math.round(pos * differential);           
        container.scrollLeft(scr);
    }); 
});

Answer 2

您将位置设置为固定的大步，因此它是“跳跃”。您必须以较小的步长迭代，直到达到目标位置。

您不应使用六个固定位置值，而是以时间步长计算新值。

你可以使用这样的东西来实现更顺畅的过渡：
http://api.jquery.com/animate/

示例

这样的事情应该有效：

elem.animate({
        scrollLeft: current + 25
    }, 500, function() {
        // Animation complete.
  });

根据鼠标位置滚动div。优化有帮助？

2 个答案:

示例