兼容手机 与PC 的一个插件touchwipe

兼容手机 与PC 的一个插件, 只是简单的 向上,向下,向左,向右 的 。已经上传我的文件里面。

http://files.cnblogs.com/files/yjhua/touchwipe.js

源码如下:

/*
 *    ----------------------
 *    TouchWipe
 *    ----------------------
 *    http://www.uedcool.com
 *    by EddyZhang (张勇辉)
 *    version 2.0
 *    2011/12/29
 *
 *    #example:
 *    $("#test").touchwipe({
 *            min_move_x: 40, //横向灵敏度
 *            min_move_y: 40, //纵向灵敏度
 *            wipeLeft: function() {$("#val").append("左,");}, //左侧滑动事件
 *            wipeRight: function() { $("#val").append("右,");}, //右侧滑动事件
 *            wipeUp: function() { $("#val").append("上,");}, //向上滑动事件
 *            wipeDown: function() { $("#val").append("下,");}, //向下滑动事件
 *            wipe:function(){$("#val").append("点击,");}, //触摸事件
 *            wipehold:function(){$("#val").append("保持,");}, //触摸保持事件
 *            preventDefaultEvents: true //阻止默认事件
 *        });
 *
 */

(function(a){
    a.fn.touchwipe=function(c){
        var b={
            clearTouchWipe:false,
            drag:false,
            min_move_x:20,
            min_move_y:20,
            wipeLeft:function(){/*向左滑动*/},
            wipeRight:function(){/*向右滑动*/},
            wipeUp:function(){/*向上滑动*/},
            wipeDown:function(){/*向下滑动*/},
            wipe:function(){/*点击*/},
            wipehold:function(){/*触摸保持*/},
            wipeDrag:function(x,y){/*拖动*/},
            preventDefaultEvents:false
        };
        if(c){a.extend(b,c)};
        this.each(function(){
            var h,g,j=false,i=false,e;
            var supportTouch = "ontouchstart" in document.documentElement;
            var moveEvent = supportTouch ? "touchmove" : "mousemove",
              startEvent = supportTouch ? "touchstart" : "mousedown",
              endEvent = supportTouch ? "touchend" : "mouseup"

            /* 移除 touchmove 监听 */
            function m(){
                this.removeEventListener(moveEvent,d);
                h=null;
                j=false;
                clearTimeout(e)
            };

            /* 事件处理方法 */
            function d(q){
                if(b.preventDefaultEvents){
                    q.preventDefault()
                };
                if(j){
                    var n = supportTouch ? q.touches[0].pageX : q.pageX;
                    var r = supportTouch ? q.touches[0].pageY : q.pageY;
                    var p = h-n;
                    var o = g-r;
                    if(b.drag){
                        h = n;
                        g = r;
                        clearTimeout(e);
                        b.wipeDrag(p,o);
                    }
                    else{
                        if(Math.abs(p)>=b.min_move_x){
                            m();
                            if(p>0){b.wipeLeft()}
                            else{b.wipeRight()}
                        }
                        else{
                            if(Math.abs(o)>=b.min_move_y){
                                m();
                                if(o>0){b.wipeUp()}
                                else{b.wipeDown()}
                            }
                        }
                    }
                }
            };

            /*wipe 处理方法*/
            function k(){clearTimeout(e);if(!i&&j){b.wipe()};i=false;j=false;};
            /*wipehold 处理方法*/
            function l(){i=true;b.wipehold()};

            function f(n){
                //if(n.touches.length==1){
                h = supportTouch ? n.touches[0].pageX : n.pageX;
                g = supportTouch ? n.touches[0].pageY : n.pageY;
                j=true;
                this.addEventListener(moveEvent,d,false);
                e=setTimeout(l,750)
                //}
            };

            //if("ontouchstart"in document.documentElement){
            if(b.clearTouchWipe){
                this.removeEventListener(startEvent,f,false);
                this.removeEventListener(endEvent,k,false);
            }else{
                this.addEventListener(startEvent,f,false);
                this.addEventListener(endEvent,k,false)
            }
            //}
        });
        return this
    };
})(jQuery);

时间: 2024-08-29 15:22:47

兼容手机 与PC 的一个插件touchwipe的相关文章

java企业站源码 响应式 兼容手机平板PC 主流SSM 框架 freemaker 静态引擎

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 点击:获取地址   QQ 313596790 官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4

java企业站源码 响应式 兼容手机平板PC 主流SSM框架 freemaker 静态引擎

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java we

java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.2.5+ mybaits3.3  SSM 普通java we

java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

java 企业站源码 兼容手机平板PC 自适应响应式 SSM主流框架 freemaker 静态引擎

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

java 网站源码 四套模版 在线编辑模版 兼容手机平板PC freemaker 静态引擎

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

java 企业站源码 自适应响应式 兼容手机平板PC SSM freemaker 静态引擎主流框架

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

java 企业站源码 兼容手机平板PC 自适应响应式 freemaker 静态引擎 SSM 框架

前台: 支持四套模版, 可以在后台切换 官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送p

dedecms手机PC同步更新插件的bug修复和前后端调试的经验

2017年,由于工作原因,下载了一个dedecms手机和PC同步更新的插件. 拿到这个插件的时候,出现了手机端和PC,模板混乱生成的问题. 由于,当时仅仅是使用dedecms,对dede内核的一些函数并不了解. 所以,对这个bug的修复,一筹莫展.但并没有放弃,接下来的一两年,我对这个问题,无数次的冲锋都倒了下. 趁着疫情这段时间,加上参加了技术培训,这次又冲锋了一次.成功了. 一:相关技术基础. 1.要有一定的PHP基础.遇到PHP代码不要怕.能读懂每段代码的意思. 2.要对dede的缓存有一