Question

我是一名刚接触开发的界面设计师，而且我遇到了一个我正在研究的辅助项目。我想创建一个长的，水平晃动的视差场景。用户可以使用鼠标滚轮水平滚动视图。（我目前正在使用这个JQuery插件来帮助我实现这个目标：http://www.pixxelfactory.net/jInvertScroll/）

此外，我希望用户能够将鼠标悬停在浏览器窗口左侧或右侧边缘的20px间隙上，只要它们悬停在那里，就可以向该方向滚动视图。（作为参考，这种交互基于许多MOBA游戏，如LoL，Dota 2或HOTS，用户可以在屏幕边缘放置游标以平移地图。）

我找到了一个示例脚本（如下所示），但它并没有完全符合我的目标。在此示例中，屏幕垂直分成两半，并且悬停在顶部或底部部分向上或向下滚动视图。正如我上面提到的，我只想要一个20px宽，100％高度的屏幕区域，用户可以将其悬停在滚动视图上。

我目前的来源：

$(document).mousemove(function(e) {
$("html, body").scrollTop(function(i, v) {
        var h = $(window).height();
        var y = e.clientY - h / 2;
        return v + y * 0.1;
    });
});

任何建议都会很棒！

Answer 1

首先制作2个div，一个用于左边，一个用于右边。将它们的位置设置为固定在CSS中，并使它们在将鼠标悬停在页面上时滚动页面。

这就是我的JS测试代码：

var offset = 0;

$(document).ready(function(){

  $('.left').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setInterval(function() {
    offset += 300;
    $('html, body').animate({
      scrollTop: offset
    }, 1);

  }, 10);
}).bind('mouseleave', function(){
    this.iid && clearInterval(this.iid);
});


$('.right').bind('mouseenter', function() {
  var self = $(this);
  this.iid = setInterval(function() {
    offset -= 300;
    $('html, body').animate({
        scrollTop: offset
    }, 1);

  }, 10);
}).bind('mouseleave', function(){
    this.iid && clearInterval(this.iid);
  });
});

以下是完整示例： https://jsfiddle.net/h596y5rs/1/

滚动鼠标悬停

1 个答案: