模仿iPhone中的JavaScript主屏幕幻燈片

我想在Safari/Chrome/Firefox上模仿JavaScript的iPhone主屏幕。模仿iPhone中的JavaScript主屏幕幻燈片

通過模仿我的意思是： - 有一對夫婦的頁面 - 點擊&拖動/用我的鼠標刷卡頁面之間進行切換 - 有從底部iPhone主屏幕上的點顯示是哪個頁面

最接近我想要的是： http://jquery.hinablue.me/jqiphoneslide/ 但滑動不能像iPhone一樣工作（我必須首先滑動，然後在釋放鼠標按鈕後出現動畫），並且沒有點底端。

2010-05-12 kolinko

我通過使用jQuery & jquery.slide-0.4.3.js解決了這個問題。

jQuery Slide在每個頁面之間自動滑動，所以我不得不添加一個鼠標事件（onMouseDrag），該事件停止自動滑動&對用戶作出反應。它工作得很好。

這是我加入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);

而且也防止文本選擇用鼠標拖動的時候我之前jSlide類的聲明說：

$.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 
      } 
     }); 
    });

我不知道是否所有代碼是必要的...最有可能你仍然需要調整它粘貼到jquery.slide後，但它應該讓你開始..

來源

2010-07-27 14:51:29 kolinko

模仿iPhone中的JavaScript主屏幕幻燈片

回答

相關問題