javascript - Hammer.js - slide element slowly (carousel effect) on swipedrag right or left - Stack Overflow

admin管理员组

文章数量:1353343

I'm developing a mobile app using cordova 3.0 for Android. I have a list of element in a wrapper div:

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

now I'd like to move this list_wrapper slowly when user drag left o right to change view with another element, so to create a slide effect.

I'm talking abount something like this:

At this moment I succeeded in doing it only on swipe and it's not what I want because on swipe the view is changed once all in block. This is what I did:

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

Besides I don't like this swipe solution very much because the swipe does not work well for me (I tested the swipe on chromium and firefox running my app on ripple emulate).

Any advice? Thanks

I'm developing a mobile app using cordova 3.0 for Android. I have a list of element in a wrapper div:

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

now I'd like to move this list_wrapper slowly when user drag left o right to change view with another element, so to create a slide effect.

I'm talking abount something like this:

At this moment I succeeded in doing it only on swipe and it's not what I want because on swipe the view is changed once all in block. This is what I did:

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

Besides I don't like this swipe solution very much because the swipe does not work well for me (I tested the swipe on chromium and firefox running my app on ripple emulate).

Any advice? Thanks

• javascript
• jquery
• cordova
• gestures
• hammer.js

Share Improve this question Follow edited Jul 18, 2014 at 8:20 Frank asked Jul 18, 2014 at 8:08 FrankFrank 2,18388 gold badges3434 silver badges5353 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

try code like this:

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

console.log(event.deltaX);

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

});

I advice you not use jQuery because she make your app run slowly in mobile browsers, try use better tools, especially when you animating elements. And never move elements with their left or top, use transforms! :)

maybe you will have a look on this example-site: http://m.v-s-b.de/de/

the news at the bottom will have a pan/slide effect.

i am using hammerJS 2 and jquery 1.10

i was inspired by http://www.sitepoint./jquery-plugin-for-touch-swiping-part-1-of-2/

my code looks like this:

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

            });
        });

本文标签： javascriptHammerjsslide element slowly (carousel effect) on swipedrag right or leftStack Overflow