第一种:
- <script>
- (function($) {
- var options, Events, Touch;
- options = {
- x: 20,
- y: 20
- };
- Events = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap', 'longTap', 'drag'];
- Events.forEach(function(eventName) {
- $.fn[eventName] = function() {
- var touch = new Touch($(this), eventName);
- touch.start();
- if (arguments[1]) {
- options = arguments[1]
- }
- return this.on(eventName, arguments[0])
- }
- });
- Touch = function() {
- var status, ts, tm, te;
- this.target = arguments[0];
- this.e = arguments[1]
- };
- Touch.prototype.framework = function(e) {
- e.preventDefault();
- var events;
- if (e.changedTouches) events = e.changedTouches[0];
- else events = e.originalEvent.touches[0];
- return events
- };
- Touch.prototype.start = function() {
- var self = this;
- self.target.on("touchstart",
- function(event) {
- event.preventDefault();
- var temp = self.framework(event);
- var d = new Date();
- self.ts = {
- x: temp.pageX,
- y: temp.pageY,
- d: d.getTime()
- }
- });
- self.target.on("touchmove",
- function(event) {
- event.preventDefault();
- var temp = self.framework(event);
- var d = new Date();
- self.tm = {
- x: temp.pageX,
- y: temp.pageY
- };
- if (self.e == "drag") {
- self.target.trigger(self.e, self.tm);
- return
- }
- });
- self.target.on("touchend",
- function(event) {
- event.preventDefault();
- var d = new Date();
- if (!self.tm) {
- self.tm = self.ts
- }
- self.te = {
- x: self.tm.x - self.ts.x,
- y: self.tm.y - self.ts.y,
- d: (d - self.ts.d)
- };
- self.tm = undefined;
- self.factory()
- })
- };
- Touch.prototype.factory = function() {
- var x = Math.abs(this.te.x);
- var y = Math.abs(this.te.y);
- var t = this.te.d;
- var s = this.status;
- if (x < 5 && y < 5) {
- if (t < 300) {
- s = "tap"
- } else {
- s = "longTap"
- }
- } else if (x < options.x && y > options.y) {
- if (t < 250) {
- if (this.te.y > 0) {
- s = "swipeDown"
- } else {
- s = "swipeUp"
- }
- } else {
- s = "swipe"
- }
- } else if (y < options.y && x > options.x) {
- if (t < 250) {
- if (this.te.x > 0) {
- s = "swipeLeft"
- } else {
- s = "swipeRight"
- }
- } else {
- s = "swipe"
- }
- }
- if (s == this.e) {
- this.target.trigger(this.e);
- return
- }
- }
- })(Windows.jQuery || Windows.Zepto);
- </script>
第二种:
- <script>
- ;(function(a){
- a.fn.touchwipe=function(c){
- var b={
- 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:
- true
- };
- 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){
- this
- .addEventListener(startEvent,f,
- false);
- this
- .addEventListener(endEvent,k,
- false)
- //}
- });
- return this
- };
- })(jQuery);
- /*
- 调用
- */
- $("#aa").touchwipe({
- wipeLeft:function(){ alert("向左滑动了")},
- wipeRight:function(){alert("向右滑动了")},
- })
- </script>
第三种:
- <script>
- /**
- * jQuery Plugin to obtain touch gestures
- * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
- * @version 1.1.1 (9th December 2010)
- */
- ;(function($, undefined){
- $.fn.touchwipe =function(settings) {
- var config = {
- min_move_x: 50,
- min_move_y: 20,
- wipeLeft:function() { },
- wipeRight:function() { },
- preventDefaultEvents:
- false
- };
- if
- (settings) $.extend(config, settings);
- this.each(function() {
- var startX;
- var startY;
- var isMoving =false;
- var directionLocked =null;
- function cancelTouch() {
- this
- .removeEventListener(
- 'touchmove', onTouchMove);
- startX =null;
- isMoving =false;
- directionLocked =false;
- }
- function onTouchMove(e) {
- if
- (config.preventDefaultEvents) {
- e.preventDefault();
- }
- if(isMoving) {
- var
- x = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;
- var
- y = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;
- var dx = startX - x;
- var dy = startY - y;
- var
- absDistX = Math.abs(dx);
- var
- absDistY = Math.abs(dy);
- if
- (directionLocked ===
- "y") {
- return
- }else {
- if
- (directionLocked ===
- "x") {
- e.preventDefault()
- }else {
- absDistX = Math.abs(dx);
- absDistY = Math.abs(dy);
- if (absDistX <4) {
- return
- }
- if
- (absDistY> absDistX ) {
- dx = 0;
- directionLocked ="y";
- return
- }else {
- e.preventDefault();
- directionLocked ="x"
- }
- }
- }
- if
- (absDistX>= config.min_move_x) {
- cancelTouch();
- if(dx> 0) {
- config.wipeLeft();
- }
- else {
- config.wipeRight();
- }
- }
- }
- }
- function onTouchStart(e)
- {
- if
- (e.touches.length == 1) {
- startX = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;
- startY = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;
- isMoving =true;
- directionLocked =false;
- this.addEventListener('touchmove', onTouchMove,false);
- }
- }
- if ('ontouchstart' in
- document.documentElement) {
- this.addEventListener('touchstart', onTouchStart,false);
- }
- });
- return this;
- };
- })(jQuery);
- <br><br>
来源: http://www.bubuko.com/infodetail-3035528.html