zoukankan      html  css  js  c++  java
  • 移动端,做滑动效果需要有触摸误差范围

    // nav宽度太小的时候,控制nav可以左右滑动查看地址
    $('.touch-move').bind('touchstart', function (event) {
    // 控制只有iPhone5才需要左右滚动,其他手机的屏幕够宽了
    if (parseInt($(this).css('width'), 10) > 320) {
    return;
    }

        nav_is_moving = true;
        start_position = {
            offsetX: $(this).offset().left,
            x: event.changedTouches[0].clientX
        }
    })
    $('.prompt-select-fixed').bind('touchmove', function (event) {
        event.preventDefault();
        if (!nav_is_moving) {
            return;
        }
        // 计算拉动的距离
        var offset = event.changedTouches[0].clientX - start_position.x + start_position.offsetX;
    
        $('.touch-move').css({
            '-webkit-transform': 'translateX(' + offset + 'px)',
            'transform': 'translateX(' + offset + 'px)'
        })
    })
    $('.prompt-select-fixed').bind('touchend', function (event) {
        if (!nav_is_moving) {
            return;
        }
        var fixedOffset;
        nav_is_moving = false;
        
        // 用于判断滑动方向
        var offset = event.changedTouches[0].clientX - start_position.x;
        
        // 当未选择区县时,长度不会超出;且向右滑时,滚回0的位置
        if (!$('#district').val() || offset >= 5) {
            $('.touch-move').css({
                '-webkit-transform': 'translateX(' + 0 + 'px)',
                'transform': 'translateX(' + 0 + 'px)'
            })
        } 
    
        // 当右边距离"确定"太远 的情况下;且向左滑时,回滚到"确定"左边... -5是用于触摸的误差尺寸范围
        else if($('#district').val() && offset < -5){
            fixedOffset = parseInt($('.prompt-select-back').css('width'), 10);
            $('.touch-move').css({
                '-webkit-transform': 'translateX(-' + fixedOffset + 'px)',
                'transform': 'translateX(-' + fixedOffset + 'px)'
            })
        }
    })
  • 相关阅读:
    到底什么时候该使用MQ?
    阿里巴巴开源项目 Druid 负责人温少访谈
    MYSQL外键的使用以及优缺点
    SpringMVC拦截器(资源和权限管理)
    SpringMVC访问静态资源
    设计模式读书笔记文档下载
    java提高篇(八)----详解内部类
    Storm:最火的流式处理框架
    vue 学习视频推荐 & 初始化项目流程
    页面布局练习
  • 原文地址:https://www.cnblogs.com/xfh0192/p/8137589.html
Copyright © 2011-2022 走看看