2011-11-29 2 views
2

jQuery HTML scroller 플러그인을 찾고 있는데, 모바일 장치에서 내비게이션을 스 와이프하고 데스크톱에서도 작동합니다.모바일 용 jQuery 항목 스크롤러 플러그인을 찾고 있습니다.

기본적으로 브라우저에서 iPad IMDB 앱처럼 스 와이프 제스처를 사용하여 뉴스를 회전해야합니다. touch scroller IMDB

내가 iScroll 및 센차 터치 스크립트를 발견했지만, 그들도 "지방"입니다 검색하는 동안 다음은

그것의 스크린 샷이다.

누구든지 다음과 같이 추천 할 수 있습니까?

감사합니다.

UPD : 코덱스에서만 정확히 very cool carousel을 찾았습니다. 슬프게도 상업적입니다.

답변

2

touchstarttouchmove 이벤트 (이 경우에는 touchend 이벤트가 있지만 필요하지는 않음)를 사용해야하며, 마우스 이벤트와 동일한 방식으로 작동합니다.

다음은 이전에 개인적으로 사용한 적이없는 개념의 예입니다.

var startX = 0, startY = 0; 

$('.selector.').bind('touchstart', function(event) { 
    startX = event.touches[0].pageX; 
    startY = event.touches[0].pageY; 
}); 

$('.selector.').bind('touchmove', function(event) { 
    endX = event.touches[0].pageX; 
    endY = event.touches[0].pageY; 

    if (startX - 100 < endX) 
    { 
     // SWIPE LEFT CODE HERE 

     // The startX - 100 is to give some leeway for the user, they have to 
     // move there finger at least 100 pixel difference to the left to trigger 
    } 
    elseif (endX > startX + 100) 
    { 
     // SWIPE RIGHT CODE HERE 

     // The startX + 100 is to give some leeway for the user, they have to 
     // move there finger at least 100 pixel different to the right to trigger 
    } 
}); 

기본 개념은 당신이 touchstart 이벤트를 가지고 있고이 시작 위치와 x는 그들이 왼쪽 강타하고 낮은 경우가, 강타하는 방법을 결정하는 touchmove 이벤트를 기록하고, 바로 그때 높은 X y가 높을수록 위로, y가 내려 가면서 내려 간다.

이것은 좋은 자료입니다. http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

+0

도움을 주셔서 감사합니다. – Marvin3

관련 문제