使用scrollTo插件和单击并按住功能将导航元素添加到页面

Question

您可以访问以下网址查看该网站：www.highdwellercreative.com/colife。该网站基于这样的概念：城市将随着公司的发展而发展，我们想要一种不同的感觉，然后使用提供的滚动条进行滚动。我一直在研究由四个方向箭头（上、下、左、右）组成的键盘式导航。

我目前正在使用 setInterval() 函数来循环 mousedown() 上的scrollTo 插件，并使用clearInterval() 函数来结束 mouseup() 上的循环。

我还将重复间隔设置为 1 毫秒，以实现平滑滚动。我已经包含了使我迄今为止所完成的工作有效的代码，但它仍然有点粗糙，尤其是在 Firefox 4 中。到目前为止，这确实适用于所有浏览器，包括 IE，但它可能会更流畅，我在不知道如何实现这一点。此外，如果您单击其中一个导航按钮并立即右键单击它，页面就会卡在该方向上滚动。任何有关如何改进这一点的帮助将不胜感激。

var rightId;

$('span#right').mousedown(function() {

    rightId = setInterval(function(){$.scrollTo('+=5px', {axis:'x'})}, 1);

}).mouseup(function() {

    clearInterval(rightId);

});

var leftId;

$('span#left').mousedown(function() {

    leftId = setInterval(function(){$.scrollTo('-=5px', {axis:'x'})}, 1);

}).mouseup(function() {

    clearInterval(leftId);

});

var upId;

$('span#up').mousedown(function() {

    upId = setInterval(function(){$.scrollTo('-=5px', {axis:'y'})}, 1);

}).mouseup(function() {

    clearInterval(upId);

});

var downId;

$('span#down').mousedown(function() {

    downId = setInterval(function(){$.scrollTo('+=5px', {axis:'y'})}, 1);

}).mouseup(function() {

    clearInterval(downId);

});

Answer 1

您当然可以将这些全部放入一个函数中：

function moveAround(elem,dir,moveAxis) {
  var moving;
  $(elem).mousedown(function() {
    moving = setInterval(function(){$.scrollTo(dir+'=5px', {axis:moveAxis})}, 1);
  }).mouseup(function() {
    clearInterval(moving);
  });
}
moveAround('span#left','-','x');
moveAround('span#right','+','x');
moveAround('span#up','-','y');
moveAround('span#down','+','y');

就功能而言，您可能希望双击将您移动 500 像素或其他。只是为了让人们能够更快地游览城市。 :)

另一种方法是使用 .animate，以及调用相同函数的回调函数（只要 mousedown 仍然处于活动状态）。