이미지 팬에 여유 공간 추가하기

Question

자바 스크립트 및 jQuery (여유 플러그인 포함)를 사용하여 가상 둘러보기를 만듭니다. 정말로 왼쪽과 오른쪽으로 팬 할 수있는 긴 이미지. 나는 원인을 위해 완벽하다는 것을 발견했다 : http://jsfiddle.net/MvRdD/1/. 애니메이션에 easing을 추가하는 방법이 있습니까?

Answer 1

http://jsfiddle.net/ARTsinn/MvRdD/890/

$(document).ready(function() { 
    $.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js"); 
    var animateTime = 10, 
     offsetStep = 5, 
     scrollWrapper = $('#wrap'); 

    //event handling for buttons "left", "right" 
    var aktiv; 
    $('.bttL, .bttR').mousedown(function(e) { 
     if (e.target.className === 'bttR') { 
      aktiv = window.setInterval(function() { 
       scrollWrapper.animate({ 
        scrollLeft: '+=' + 20 
       }, { 
        duration: 600, 
        queue: false, 
        easing: 'easeOutCirc' 
       }); 
      }, 10); 
     } else if (e.target.className === 'bttL') { 
      aktiv = window.setInterval(function() { 

       scrollWrapper.animate({ 
        scrollLeft: '-=' + 20 
       }, { 
        duration: 1200, 
        queue: false, 
        easing: 'easeOutCirc' 
       }); 
      }, 10); 

     } 
    }).mouseup(function() { 
     window.clearInterval(aktiv); 
    }); 


    scrollWrapper.mousedown(function(event) { 
     $(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft); 
     return false; 
    }).mouseup(function(event) { 
     $(this).data('down', false); 
    }).mousemove(function(event) { 
     if ($(this).data('down')) { 
      $(this).stop(false, true).animate({ 
       scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2 
      }, { 
       duration: 600, 
       queue: false, 
       easing: 'easeOutCirc' 
      }); 
     } 
    }).mousewheel(function(event, delta) { 
     $(this).stop(false, true).animate({ 
      scrollLeft: '-=' + delta * 60 
     }, { 
      duration: 400, 
      queue: false, 
      easing: 'easeOutCirc' 
     }); 
     event.preventDefault(); 
    }).css({ 
     'overflow': 'hidden', 
     'cursor': '-moz-grab' 
    }); 
});