используя плагин scrollTo и нажмите и удерживайте функциональность, чтобы добавить элементы навигации на страницу - PullRequest
Новая
       11

используя плагин scrollTo и нажмите и удерживайте функциональность, чтобы добавить элементы навигации на страницу

0 голосов
/ 18 апреля 2011

Вы можете просмотреть сайт по адресу www.highdwellercreative.com / colife .Этот сайт основан на концепции, что город будет расти по мере роста компании, и мы хотели другого ощущения, чем прокрутка с предоставленными полосами прокрутки.Я работал над стилем навигации клавиатуры, который состоит из четырех стрелок (вверх, вниз, влево, вправо).

В настоящее время я использую функцию setInterval (), чтобы зациклить плагин scrollTo для mousedown () и функцию 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);

});

1 Ответ

0 голосов
/ 21 апреля 2011

Вы, конечно, можете поместить все это в одну функцию: 

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 все еще был активен).

...