插件-模仿滑动动作事件

前端页面经常用到滑动事件,即判断是动作左滑、右滑、上滑或者下滑,然后根据事件类型完成不同的功能,最常见的就是H5的翻页,如果需要的事件很简单,就是判断一下滑动方向然后执行回调函数,那么如果引用较大的插件将会十分影响页面的加载速度。

下面就分享一个简单的滑动事件的插件,轻量好用。

直接贴代码

var TouchTool = function(param) {
    var self = this;
    this.dh = document.documentElement.clientHeight;
    this.direction = param.direction || ‘vertical‘;
    this.device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
    this.sx = this.sy = this.ex = this.ey = this.mx = this.my = this.speedx = this.speedy = this.st = this.et = 0;
    this.obj = param.obj;
    this.len = this.obj.length;
    this.startEvtName = this.device ? "touchstart" : "mousedown";
    this.moveEvtName = this.device ? "touchmove" : "mousemove";
    this.endEvtName = this.device ? "touchend" : "mouseup";
    console.log(this.obj)
    this.touchStart = function(e) {
        var e = e || event;
        self.st = new Date().getTime();
        self.sx = self.device ? e.touches[0].clientX : e.clientX;
        self.sy = self.device ? e.touches[0].clientY : e.clientY;

        self.obj.addEventListener(self.moveEvtName, self.touchMove);
        self.obj.addEventListener(self.endEvtName, self.touchEnd);
    }
    this.touchMove = function(e) {
        var e = e || event;
        self.ex = self.device ? e.touches[0].clientX : e.clientX;
        self.ey = self.device ? e.touches[0].clientY : e.clientY;
    }
    this.touchEnd = function(e) {
        var e = e || event;
        self.et = new Date().getTime();
        self.obj.removeEventListener(self.moveEvtName, self.touchMove);
        self.obj.removeEventListener(self.endEvtName, self.touchEnd);

        self.ex = self.ex;
        self.ey = self.ey;

        self.mx = self.ex - self.sx;
        self.my = self.ey - self.sy;
        self.speedx = Math.abs(self.mx / (self.et - self.st));
        self.speedy = Math.abs(self.my / (self.et - self.st));

        if(self.direction == ‘horizontal‘) {
            if((self.speedx > 1 || (self.speedx > 0.5 && Math.abs(self.mx) > 250)) && self.mx > 0) {
                if(typeof param.slideRight != ‘undefined‘) {
                    param.slideRight();
                }
            };
            if((self.speedx > 1 || (self.speedx > 0.5 && Math.abs(self.mx) > 250)) && self.mx < 0) {
                if(typeof param.slideLeft != ‘undefined‘) {
                    param.slideLeft();
                }
            };
        }

        if(self.direction == ‘vertical‘) {
            if((self.speedy > 1 || (self.speedy > 0.5 && Math.abs(self.my) > 300)) && self.my > 0) {
                if(typeof param.slideDown != ‘undefined‘) {
                    param.slideDown();
                }
            };
            if((self.speedy > 1 || (self.speedy > 0.5 && Math.abs(self.my) > 300)) && self.my < 0) {
                if(typeof param.slideUp != ‘undefined‘) {
                    param.slideUp();
                }
            }
        }
    }

    this.obj.addEventListener(this.startEvtName, this.touchStart);
}

使用方法:

new TouchTool({
    ‘obj‘: document.getElementById(‘touchBox‘),
    ‘direction‘: ‘vertical‘, //horizontal水平 vertical垂直
    ‘slideUp‘: function() {
        console.log(‘u‘)
    },
    ‘slideDown‘: function() {
        console.log(‘d‘)
    },
    ‘slideLeft‘: function() {
        console.log(‘l‘)
    },
    ‘slideRight‘: function() {
        console.log(‘r‘)
    }})

在配置参数里填入要执行的回调函数,就可以使用了,PC端和移动端都适用,很简单有木有

(完)

时间: 2024-10-03 23:26:27

插件-模仿滑动动作事件的相关文章

分享一个jquery插件,弥补一下hover事件的小小不足

hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好. 易迅的菜单就没有这个问题 delayHover来解决这个问题 啥也不说了先看调用---------- 调用方式: var duration = 500;// 延迟500毫秒 $('#div1').delayHover(function

Java Swing界面编程(22)---事件处理:动作事件及监听处理

要想让一个按钮变得有意义,就必须使用事件处理.在swing的事件处理中,可以使用ActionListener接口处理按钮的动作事件. package com.beyole.util; import java.awt.Font; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowAdapter

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动.滚动插件 : http://www.cnblogs.com/linJie1930906722/p/6072984.htm

js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

/** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1; function scrollFunc(e) { // e存在就用e不存在就用windon.event e = e || window.event;// 先判断是什么浏览器 if (e.wheelDelta) { // 浏览器IE,谷歌 if (e.wheelDelta > 0) {//当滑轮向上滚动时// console.log("滑轮向上滚动"); if (s == 0) {

自学第六次博客(动作事件的处理)

按钮动作事件示例 import javax.swing.*; public class Action extends JFrame{ static JButton b1=new JButton("红色"); static JButton b2=new JButton("黄色"); static JButton b3=new JButton("蓝色"); static JPanel p=new JPanel(); static JLabel l=n

iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                  上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从swiper上开始滑动的时候,整个scroll就显得很不灵敏.各种调试,各种alert终于把问题定位在swiper.js的touchend上. touchend没有冒泡到scroll上,但是touchstart,toucnmove是有冒泡到scroll上的. 找了好久都没有找到哪里阻止了冒泡.最后想到一

【Android Tricks 6】ViewPager首页与尾页的滑动动作响应

ViewPager能够说是Android应用中使用比較广发的一个组件了.它能够帮助我们非常 方便地实现滑动更换View的效果.刚好近期搞的一个项目有一个需求用到了这个,同 时是要能在首页和尾页滑动时可以进行响应,而不是像默认的那样没有不论什么动作,所 以略微研究了下,希望能够对大家有所帮助. 在分析了需求之后.发现这个应该是和ViewPager的换页监听有联系,于是做了个小 demo.通过实验来寻找问题的解决方式. 首先贴出换页监听器的几个public方法以及第一个方法中state数字代表的含义

跟着《beginning jquery》学写slider插件并借助自定义事件改进它

<beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现了自动播放,键盘和鼠标控制.但是,借助jquery的自定义事件来优化这个插件,可以使逻辑更清楚. 首先贴一下作者(Jack Franklin)的原程序: //未完待续

UGUI 过渡动画插件,模仿NGUI的Tween (转载)

最近在相亲,后来好朋友跟我说他写了一个好插件,于是我就把女朋友甩了,看看他的插件,可以在UGUI制作简单过渡动画. 我看了下是模仿NGUI的Tween, 我在筱程的基础上稍微改到人性化, 简单支持的让子物体也透明功能. 组件图: 整体图:   TaoCode地址: http://code.taobao.org/svn/Tween/ 下载地址: http://yunpan.cn/cLQnwsWuhppLz  访问密码 08e9 , DoTween需要自己下载 联系方式: [email protec