Hammer.js-向右或向左滑動/拖動時緩慢滑動元素（輪播效果）

Question

我正在使用適用於Android的cordova 3.0開發一個移動應用程序。 我在包裝div中有一個元素列表：

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

現在，當用戶向左或向右拖動以更改另一個元素的視圖時，我想緩慢移動此list_wrapper，以創建幻燈片效果。

我在說這樣的話：

目前，我僅在滑動時成功完成了操作，這不是我想要的，因為在滑動時視圖一次全部更改。 這是我所做的：

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);

此外，我不太喜歡這種滑動解決方案，因為該滑動對我而言效果不佳（我在鉻和Firefox上測試了滑動，並在波紋仿真下運行了我的應用程序）。

有什么建議嗎？ 謝謝

Answer 1

試試這樣的代碼：

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

console.log(event.deltaX);

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

});

我建議您不要使用jQuery，因為它會使您的應用程序在移動瀏覽器中運行緩慢，請嘗試使用更好的工具，尤其是在對元素進行動畫處理時。 永遠不要將元素的左側或頂部移動，而要使用變換！ :)

Answer 2

也許您可以在以下示例站點上查看： http : //mv-sb.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);
                }

            });
        });