jquery手機向上和向下滑動

Question

我有更多圖片，我需要向上滑動並向下滑動我的項目中這些圖片的功能。例如，在iPhone中，如果我向上滑動圖像，則圖像將上升，新圖像將從底部開始，反之亦然。

如何使用jQuery Mobile做到這一點？ 下面是左右刷卡的代碼，但我需要像這樣上下滑動。任何人都可以幫我

<style> 
    .clip { 
     height:250px; 
     width:150px; 

     overflow: hidden; 
    } 
    .pan { 
     width: 400%; 
     -o-transition: -o-transform 2s; 
     -moz-transition: -moz-transform 2s; 
     -webkit-transition: -webkit-transform 2s; 
     -webkit-backface-visibility: hidden; 
     -webkit-perspective: 1000; 
    } 
    .pan img { 
     display: block; 
     float: left; 
     width: 25%; 
     -moz-user-select: none; 
     -webkit-user-select: none; 
     -webkit-user-drag: none; 
    } 
</style> 

<script> 

var position = 0;

function next() { 
     position -= 25; 
     if (position <= -100) 
      position = 0; 
     update(); 
    } 

    function prev() { 
     position += 25; 
     if (position > 0) 
      position = 0; 
     update(); 
    } 

    function update() { 
     var pan = document.getElementById("pan"); 
     pan.style.OTransform = "translateX(" + position + "%)"; 
     pan.style.MozTransform = "translateX(" + position + "%)"; 
     pan.style.WebkitTransform = "translateX(" + position + "%)"; 
    } 


    $(function() { 

     $(window).bind("swipeleft", next); 
     $(window).bind("swiperight", prev); 
     $(window).bind("keydown", function(event) { 
      if (event.which==38) 
       prev(); 
      else if (event.which==40) 
       next(); 
     }); 
     $("img").bind("dragstart", function(ev) { ev.preventDefault(); }); 
    }); 

 <div class="clip"> 
      <div id="pan" class="pan"> 
       <img src="images/logo.jpg" /> 
       <img src="images/53-house.png" /> 
       <img src="images/bg-blue.png" /> 
       <img src="images/bg-sandal.png" /> 
      </div> 
     </div> 

Answer 1

jQuery Mobile的不支持swipeup/swipedown。試試這個插件：https://github.com/blackdynamo/jquerymobile-swipeupdown