jQuery Multi-TouchWipe / Multi-TouchZoom
jQuery Multi-TouchWipe / Multi-TouchZoom是小弟参照WipeTouch扩展出来的针对多点触屏划动而改写出来的Jquery插件，可以为dom上的两手指触屏划动拨入(zoomin)或者拨开(zoomout)操作而绑定自己的事件。
// jQuery multitouchzoom 1.0.0 // ------------------------------------------------------------------------ // // Developed and maintained by Nelson // Inspired by and referenced from Igor Ramadas's WipeTouch. // // USAGE // ------------------------------------------------------------------------ // // $(selector).multitouchzoom(config); // // The multitouchzoom events should expect 2 fingers(a finger and b finger) touch on the screen at the same time; // // // EXAMPLE // $(document).multitouchzoom({ // zoomIn: function(result) { alert("zoomIn "); }, // zoomOut: function(result) { alert("zoomOut "); } // }); // // // More details at https://github.com/nelsonkuang/MultiTouchZoom // // // The minified version of WipeTouch can be generated using Jasc: http:// (function ($) { $.fn.multitouchzoom = function (settings) { // ------------------------------------------------------------------------ // PLUGIN SETTINGS // ------------------------------------------------------------------------ var config = { // Variables and options moveX: 40, // minimum amount of horizontal pixels to trigger a wipe event moveY: 40, // minimum amount of vertical pixels to trigger a wipe event preventDefault: true, // if true, prevents default events (click for example) // Multi Touch Zoom events zoomIn: false, // called on zoom in gesture zoomOut: false, // called on zoom out gesture multiTouchMove: false, // triggered whenever touchMove acts }; if (settings) { $.extend(config, settings); } this.each(function () { // ------------------------------------------------------------------------ // INTERNAL VARIABLES // ------------------------------------------------------------------------ var startDate = false; // used to calculate timing and aprox. acceleration var touchedElement = false; // element which user has touched var clickEvent = false; // holds the click event of the target, when used hasn't clicked var aStartX; // where finger "a" touch has started, left var aStartY; // where finger "a" touch has started, top var aCurX; // keeps finger "a" touch X position while moving on the screen var aCurY; // keeps finger "a" touch Y position while moving on the screen var aIsMoving = false; // is user's finger "a" touching and moving? var bStartX; // where finger "b" touch has started, left var bStartY; // where finger "b" touch has started, top var bCurX; // keeps finger "b" touch X position while moving on the screen var bCurY; // keeps finger "b" touch Y position while moving on the screen var bIsMoving = false; // is user's finger "b" touching and moving? // ------------------------------------------------------------------------ // Multi Touch Eevents // ------------------------------------------------------------------------ // Called when user multi-touches the screen. function onMultiTouchStart(e) { var aStart = e.originalEvent.touches[0] && e.originalEvent.touches.length > 1; var bStart = e.originalEvent.touches[1]; if (!aIsMoving && !bIsMoving && aStart && bStart) { if (config.preventDefault) { e.preventDefault(); } aStartX = e.originalEvent.touches[0].pageX; aStartY = e.originalEvent.touches[0].pageY; bStartX = e.originalEvent.touches[1].pageX; bStartY = e.originalEvent.touches[1].pageY; $(this).bind("touchmove", onMultiTouchMove); // Set the start date and current X/Y for finger "a" & finger "b". startDate = new Date().getTime(); aCurX = aStartX; aCurY = aStartY; bCurX = bStartX; bCurY = bStartY; aIsMoving = true; bIsMoving = true; touchedElement = $(e.target); } } // Called when user untouches the screen. function onTouchEnd(e) { if (config.preventDefault) { e.preventDefault(); } // When touch events are not present, use mouse events. $(this).unbind("touchmove", onMultiTouchMove); // If is moving then calculate the touch results, otherwise reset it. if (aIsMoving || bIsMoving) { touchCalculate(e); } else { resetTouch(); } } // Called when user is touching and moving on the screen. function onMultiTouchMove(e) { if (config.preventDefault) { e.preventDefault(); } if (aIsMoving || bIsMoving) { aCurX = e.originalEvent.touches[0].pageX; aCurY = e.originalEvent.touches[0].pageY; bCurX = e.originalEvent.touches[1].pageX; bCurY = e.originalEvent.touches[1].pageY; // If there's a MultiTouchMove event, call it passing // current X and Y position (curX and curY). if (config.multiTouchMove) { triggerEvent(config.multiTouchMove, { aCurX: aCurX, aCurY: aCurY, bCurX: bCurX, bCurY: bCurY }); } } } // ------------------------------------------------------------------------ // CALCULATE TOUCH AND TRIGGER // ------------------------------------------------------------------------ function touchCalculate(e) { var endDate = new Date().getTime(); // current date to calculate timing var ms = startDate - endDate; // duration of touch in milliseconds var ax = aCurX; // current left position of finger 'a' var ay = aCurY; // current top position of finger 'a' var bx = bCurX; // current left position of finger 'b' var by = bCurY; // current top position of finger 'b' var dax = ax - aStartX; // diff of current left to starting left of finger 'a' var day = ay - aStartY; // diff of current top to starting top of finger 'a' var dbx = bx - bStartX; // diff of current left to starting left of finger 'b' var dby = by - bStartY; // diff of current top to starting top of finger 'b' var aax = Math.abs(dax); // amount of horizontal movement of finger 'a' var aay = Math.abs(day); // amount of vertical movement of finger 'a' var abx = Math.abs(dbx); // amount of horizontal movement of finger 'b' var aby = Math.abs(dby); // amount of vertical movement of finger 'b' //diff of current distance to starting distance between the 2 points var diff = Math.sqrt((aStartX - bStartX) * (aStartX - bStartX) + (aStartY - bStartY) * (aStartY - bStartY)) - Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by)); // If moved less than 15 pixels, touch duration is less than 100ms, // then trigger a click event and stop processing. if (aax < 15 && aay < 15 && abx < 15 && aby < 15 && ms < 100) { clickEvent = false; if (config.preventDefault) { resetTouch(); touchedElement.trigger("click"); return; } } // Is it zooming in or out? var isZoomIn = diff > 0; var isZoomOut = diff < 0; // Calculate speed from 1 to 5, 1 being slower and 5 faster. var as = ((aax + aay) * 60) / ((ms) / 6 * (ms)); var bs = ((abx + aby) * 60) / ((ms) / 6 * (ms)); if (as < 1) as = 1; if (as > 5) as = 5; if (bs < 1) bs = 1; if (bs > 5) bs = 5; var result = { aSpeed: parseInt(as), bSpeed: parseInt(bs), aX: aax, aY: aay, bX: abx, bY: aby, source: touchedElement }; if (aax >= config.moveX || abx >= config.moveX||aay>= config.moveY||aby>=config.moveY) { // If it is zooming in, trigger zoomIn events. if (isZoomIn) { triggerEvent(config.zoomIn, result); } // Otherwise trigger zoomOut events. else if (isZoomOut) { triggerEvent(config.zoomOut, result); } } resetTouch(); } // Resets the cached variables. function resetTouch() { aStartX = false; aStartY = false; bStartX = false; bStartY = false; startDate = false; aIsMoving = false; bIsMoving = false; // If there's a click event, bind after a few miliseconds. if (clickEvent) { window.setTimeout(function () { touchedElement.bind("click", clickEvent); clickEvent = false; }, 50); } } // Trigger a event passing a result object with // aSpeed & bSpeed from 1 to 5, aX / aY & bX / bY movement amount in pixels, // and the source element. function triggerEvent(zoomEvent, result) { if (zoomEvent) { zoomEvent(result); } } // ------------------------------------------------------------------------ // ADD MULTITOUCHSTART AND TOUCHEND EVENT LISTENERS // ------------------------------------------------------------------------ if ("ontouchstart" in document.documentElement) { $(this).bind("touchstart", onMultiTouchStart); $(this).bind("touchend", onTouchEnd); } }); return this; }; })(jQuery);
