滑动手势判断

由于这是pc页面,会有缩放比例问题,所以最好还是自己建个页面去移动端测

滑动试试(这里只绑定touch事件,可使用chrome模拟,或者直接使用移动设备)

效果代码:

var swipeBase = new SwipeBase(),
    msg= document.getElementById(‘msg‘);

document.addEventListener(‘touchstart‘, function (e) {
    var touche = e.touches[0];
    swipeBase.start( touche.pageX);
    e.preventDefault();
});

document.addEventListener(‘touchmove‘, function (e) {
    var touche = e.touches[0];
    swipeBase.move( touche.pageX);
});

document.addEventListener(‘touchend‘, function (e) {
    swipeBase.end();
});

function SwipeBase() {

    var prevX, toX;

    this.start = function (x) {
        prevX = x;
        toX = 0;
    };

    this.move = function (x) {
        toX = x - prevX;
        prevX = x;
    };
    this.end = function () {

        var s=10;// 此处调节敏感度
        if (toX > s) {
            msg.innerHTML=‘<b>右</b> 滑动‘+toX;
        }
        else if (toX < -s) {
            msg.innerHTML=‘<b>左</b> 滑动‘+toX;
        }
        else{
            msg.innerHTML=‘<b>未发生</b> 滑动‘+toX;
        }
    };
}
时间: 2024-11-01 09:44:23

滑动手势判断的相关文章

Android 滑动手势简单使用方法

用法:首先让指定的Activity实现Android.view.OnGestureListener,然后在你需要调用GestureDetector的View上,添加onTouchListener,之后setLongClickable(true)即可. 如: customView.setOnTouchListner(xxxListener); customView.setLongClickable(true); 之后就可以在onFling方法中设置你想要的手势. onFling方法参数解释: on

UWP滑动手势

经过近些年智能手机App的不断发展,用户已经不仅仅满足于功能上的需求.UI.设计等非功能点逐渐在App体验中占了大多数的分数.不知从何时起,滑动手势就成为了App的一个标配.他不仅仅是一个功能,更是一个UI设计.其有以下几个优点: 1.方便了单手操作.在当今大屏手机占有率越来越高的趋势下,简洁方便的单手操作模式是很有必要的. 2.美化了UI.你可能会有疑问,这是个功能,为什么美化了UI呢?其实,手势操作的另一个利器就是隐藏了部分不是那么美观的UI,使得界面看上去更简.比如邮件App ,你如果要在

Android开发之手势滑动(滑动手势监听)

在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListener监听器来,另一种是构建手势探测器 第一种方法,就是在要实现滑动的View中,实现OnTouchListener监听事件,然后判断KeyDonw和KeyUp 直接的位置距离来判断滑动方向,核心实现代码如下: /** * 设置上下滑动作监听器 * @author caizhiming */ private void setGestureListen

iOS滑动手势UIPanGestureRecognizer 注意事项

今天在做侧滑页面时,发现页面随着滑动手势而滑动,到临界点时,如果再滑动会出现抖动现象.找到解决办法是进入方法后先判断一次,再判断是在滑动范围内让页面滑动.遂将滑动手势(UIPanGestureRecognizer )注意事项总结了如下: 代码: - (void)panAction:(UIPanGestureRecognizer *)pan{ _canLeft = YES; _canRight = YES; //点相对于上一个点的位置 CGPoint moviePoint = [pan trans

iOS-响应上下左右滑动手势

iOS-响应上下左右滑动手势 分类: iPhone开发2012-03-17 14:42 25489人阅读 评论(8) 收藏 举报 iosup -(void)viewDidLoad{ UISwipeGestureRecognizer *recognizer; recognizer = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(handleSwipeFrom:)]; [recognizer setDir

解决ViewPage中嵌套有ListView或者滑动手势等造成滑动的冲突

public class ViewPagerCompat extends ViewPager { //mViewTouchMode表示ViewPager是否全权控制滑动事件,默认为false,即不控制 private boolean mViewTouchMode = false; public ViewPagerCompat(Context context, AttributeSet attrs) { super(context, attrs); } public void setViewTou

UIView上的滑动手势及动作

///////////注flowView为UIView////////// //添加滑动手势事件 UIPanGestureRecognizer *gestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:flowView action:@selector(handleGesture:)]; [flowView addGestureRecognizer:gestureRecognizer]; //添加点击手势事件 flow

如何添加ZBLibrary中的底部左右滑动手势

我们可以查看一下以前版本的ASP.NET程序,它是没有Main()函数的,也就是说它没有程序入口点,不是单独的进程.对于应用程序开发来说,这个问题并不大,因为开发者在意的Web程序的逻辑.数据安全等问题,而不是应用程序如何被加载.但对于一个Web框架来说,这个问题非常严重,因为它高度依赖IIS和Windows Server,减少了它的适用范围.如果我们查看ASP.NET Core的程序,你会发现它本质上就是一个控制台程序,如果我们把那些在Main()函数中自动生成的代码都删掉(VS2015的模板

【转】让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势. 然后......自己想办法呗,再然后,就有下面3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $("#carousel-generic").swipeleft(function() { $(this).caro