手机页面touch拉取页面效果

Posted by

手机页面touch拉取页面效果

需要下载touchSwipe。

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

touch事件如下:

touchstart:手指放到屏幕上时触发
touchmove:手指在屏幕上滑动式触发
touchend:手指离开屏幕时触发
touchcancel:系统取消touch事件的时候触发

<script>

$(“body”).on(“touchstart”, function(e) {
        //e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
        startT = +new Date;
        $(“body”).on(“touchmove”,function(event){
            _touchmove(event);
        });
    });
    function _touchmove(e) {
        var endT = +new Date – startT;
        if(Number(endT) < 100)
        {
            return;
        }
        //e.preventDefault(); //阻止页面滚动
        var moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX – startX,
        Y = moveEndY – startY;
        var moveX = (Math.abs(X) > 50) ? Math.abs(X) : 0;
        var moveY = (Math.abs(Y) > 50) ? Math.abs(Y) : 0;
        var scroll_top = $(“body”).scrollTop();
        var height = $(document).height();
        var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
        // 向右滑动  页面左拉
        if (moveX > moveY && X > 0 ) {
            console.log(“向右滑动”);
            return;
        }
        //向左滑动 页面右拉
        if (moveX > moveY && X < 0 ) {
            console.log(“向左滑动”);
            return;
        }
        // 向下滑动 页面上拉
        if ( moveX < moveY && Y > 0) {
            if(scroll_top == 0){
                console.log(“向下滑动, 页面到顶了”);
                return;
            }
            console.log(“向下滑动”);
            return;
        }
        // 向上滑动 页面下拉
        if ( moveX < moveY && Y < 0) {
            if(height <= totalheight)
            {
                console.log(“向上滑动, 页面到底了”);
                return;
            }
            console.log(“向上滑动”);
            return;
        }
        console.log(‘just touch’);
    };

</script>

 

8 comments

  1. Hey there! I’m at work browsing your blog from my new iphone 4!
    Just wanted to say I love reading your blog and look forward to all
    your posts! Keep up the excellent work!

  2. My coder is trying to convince me to move to .net from PHP.

    I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using WordPress on numerous websites for about a year and am worried about switching to another platform.
    I have heard excellent things about blogengine.net.

    Is there a way I can transfer all my wordpress content into it?
    Any help would be greatly appreciated!

eeli进行回复 取消回复

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据