Hammer.js - медленно перемещающийся элемент (эффект карусели) при прокрутке/перетаскивании вправо или влево

Question

Я разрабатываю мобильное приложение, использующее cordova 3.0 для Android. У меня есть список элементов в обертку DIV:

<div id='list_wrapper'> 
    <ul class="table-view"> 
     <li id="listItem1"> 
     </li> 
     <li id="listItem2"> 
     </li> 
    </ul> 
    <!-- ... -- > 
</div> 

теперь я хотел бы переместить эту list_wrapper медленно, когда пользователь перетащить влево о вправо, чтобы изменить вид с другим элементом, таким образом, чтобы создать слайд-эффект.

Я говорю abount что-то вроде этого:

В этот момент мне удалось сделать это только на прикосновении, и это не то, что я хочу, потому что на взмахе вид меняется раз все в блоке. Это то, что я сделал:

var hammer_options = { 
    drag_block_horizontal: true, 
    dragLockToAxis: true, 
    preventDefault: true 
}; 
var hammertime = $('#list_wrapper').hammer(hammer_options); 

var leftSwipeHandler = function() { 
    console.log("swipeleft"); 
    // ... 
}; 
var rightSwipeHandler = function() { 
    console.log("swiperight"); 
    // ... 
}; 
hammertime.on("swipeleft", leftSwipeHandler); 
hammertime.on("swiperight", rightSwipeHandler); 

Кроме того, мне не нравится это решение салфетки очень много, потому что красть не работает хорошо для меня (я проверил салфетки на хроме и светлячок работает мое приложение на пульсация Emulate).

Любые советы? Благодаря

Answer 1

может быть, вы будете иметь взгляд на этом примере сайте: http://m.v-s-b.de/de/

новости на дне будет иметь панорамирование/слайд-эффект.

я использую hammerJS 2 и JQuery 1,10

я был вдохновлен http://www.sitepoint.com/jquery-plugin-for-touch-swiping-part-1-of-2/

мой код выглядит следующим образом:

$(document).on("pagecreate", function() { 

      var news = $('#target div.news'); 
      var t = $('#target'); 
      var lastLeft = 0; 
      var i = 0; 
      var b = true; 
      var j = 0; 


      $('#target').hammer({domEvents: false}).on("panleft panright panend", function(e){ 
       console.log(lastLeft); 

       if(b === false){ 
        return; 
       }else if(lastLeft == 0 && e.type == 'panright'){ 
        //$(this).parent().css('border-left-color', '#BB131D'); 
        return; 
       }else if(Math.abs(lastLeft)+100 >= (news.width()/t.width())*100 && e.type == 'panleft'){ 
        return; 
       } 

       var w = Math.abs(t.width()); 
       var absolut = Math.abs(e.gesture.deltaX); 
       var p = (absolut/w)*100; 

       switch(e.type) { 
        case "panleft": 
         news.css('left', (-(p) + lastLeft) +'%'); 
         break; 

        case "panright": 
         news.css('left', (p + lastLeft) +'%'); 
         break; 
       } 


       if(p > 30){ 
        b = false; 

        $(this).data('hammer').stop(true); 

        switch(e.type) { 
         case "panleft": 
          i++; 
          break; 

         case "panright": 
          i--; 
          break; 
        } 
        news.animate({left: -i*100+'%'}, 400, function(){ 
         b = true; 
         lastLeft = (parseFloat(news.css('left'))/w)*100; 
        }); 

       }else if(e.type == 'panend'){ 
        news.animate({left: lastLeft+'%'}, 200); 
       } 

      }); 
     }); 

Answer 2

код попробовать так:

hammer = new Hammer(backgroundElement) 
hammer.on('panright panleft', function(event){ 

console.log(event.deltaX); 

backgroundElement.style.transform = 'translateX(' + event.deltaX + 'px)'; 

}); 

Я советую вам не использовать jQuery, потому что она заставляет ваше приложение медленно запускаться на мобильных устройствах браузеры, попробуйте использовать более эффективные инструменты, особенно когда вы анимации элементов. И никогда не перемещайте элементы с их левой или верхней частью, используйте преобразования! :)