자바 스크립트에서 iPhone 기본 화면 슬라이드를 모방 한 것

Question

Safari/Chrome/Firefox의 JavaScript에서 iPhone 기본 화면을 모방하고 싶습니다. I를 모방하여

의미 : - 페이지 의 몇 가지를 가졌 - 내 마우스 로 보내 주시면/& 드래그를 클릭하여 페이지 사이를 전환 - 하단 아이폰 메인 화면에서 그 점을 갖는 것이 어떤 페이지 표시

내가 원한 것에 가장 가까운 것은 : http://jquery.hinablue.me/jqiphoneslide/ 하지만 슬라이딩은 iPhone 에서처럼 잘 작동하지 않습니다 (먼저 슬라이드해야하고 마우스 버튼을 놓은 후에 애니메이션이 나타납니다). 그리고 점이 없습니다. 바닥.

Answer 1

jquery & jquery.slide-0.4.3.js를 사용하여 문제를 해결했습니다.

jQuery Slide가 각 페이지 사이를 자동으로 이동하므로 자동 슬라이드를 중지하는 마우스 이벤트 (onMouseDrag)를 추가해야했습니다. &은 사용자에게 반응합니다. 그것은 아주 잘 작동합니다. 나는 모든 경우에 확실하지 않다

$.extend($.fn.disableTextSelect = function() { 
     return this.each(function(){ 
      if($.browser.mozilla){//Firefox 
       $(this).css('MozUserSelect','none'); 
      }else if($.browser.msie){//IE 
       $(this).bind('selectstart',function(){return false;}); 
      }else{//Opera, etc. 
       $(this).mousedown(function(){return false;}); // this is handled in jSlide 
      } 
     }); 
    }); 

    $.extend($.fn.sliderDisableTextSelect = function() { 
     return this.each(function(){ 
      if($.browser.mozilla){//Firefox 
       $(this).css('MozUserSelect','none'); 
      }else if($.browser.msie){//IE 
       $(this).bind('selectstart',function(){return false;}); 
      }else{//Opera, etc. 
     //  $(this).mousedown(function(){return false;}); // this is handled in jSlide 
      } 
     }); 
    }); 

:

이

은 마우스로 드래그 할 때 내가 jSlide 클래스 선언 앞에 추가 텍스트 선택을 방지하기 위해, jSlide

에도

var jSlide = function(element, options) 
    { 


    element = $(element); 

    $('ul.layers li', element).sliderDisableTextSelect(); 

    // my code here 

    var dragging = false; 
    var srcX; 
    var offsetX; 
    var diff; 



    this.manualDown = function(event) { 
     dragging = true; 
     srcX = event.pageX; 
     offsetX = parseFloat($('ul.layers li', element).css('marginLeft')); 

     obj.settings.easing = "easeOutExpo"; 

     if(obj.settings.loopNr != null) { 
      obj.toggleLoop(0); 
     }; 



     return false; 
    }; 

    this.manualMove = function(event) {  
     if (dragging) { 
      diff = event.pageX - srcX; 
      $('ul.layers li', element).css('marginLeft',(offsetX+diff)+'px'); 
      console.log((offsetX+diff)+'px'); 
     };   
     return false; 
    }; 

    this.manualUp = function(event) { 
     if (dragging) { 
     dragging = false; 


     if ((diff<-obj.settings.layerWidth/5) && (obj.settings.slidePos<obj.settings.layersSize-1)) { 
      obj.slideTo(parseInt(obj.settings.slidePos)+1); 
     } else if ((diff>obj.settings.layerWidth/5) && (obj.settings.slidePos>0)) { 
      obj.slideTo(parseInt(obj.settings.slidePos)-1); 
     } else { // if not slid far enough nor is it the last slide 
      obj.slideTo(obj.settings.slidePos); 
     }; 
     }; 
    }; 

    this.manualLeave = function(event) { 
     if (dragging) { 
     dragging = false; 

     if ((diff<0) && (obj.settings.slidePos<obj.settings.layersSize-1)) { 
      obj.slideTo(parseInt(obj.settings.slidePos)+1); 
     } else if ((diff>0) && (obj.settings.slidePos>0)) { 
      obj.slideTo(parseInt(obj.settings.slidePos)-1); 
     } else { // if it's the last slide 
      obj.slideTo(obj.settings.slidePos); 
     }; 
     }; 

    }; 


    element.mousedown(this.manualDown); 
    element.mousemove(this.manualMove); 
    element.mouseup(this.manualUp); 
    element.mouseleave(this.manualLeave); 

그리고 추가 것입니다 코드가 필요합니다 ... 아마 당신은 여전히 ​​jquery.slide에 붙여 넣은 후에 조정할 필요가 있지만, 시작해야합니다.