layer.photos移动端手势缩放支持

分享 未结 0 63
名咋又被改了
悬赏:20飞吻
var g = {};
/**
* 动态元素添加event事件
* https://github.com/Cristy94/dynamic-listener/blob/master/dynamicListener.js
* @param {Element} rootElement The root element to add the linster too.
* @param {string} eventType The event type to listen for.
* @param {string} selector The selector that should match the dynamic elements.
* @param {function} callback The function to call when an event occurs on the given selector.
* @param {boolean|object} options Passed as the regular `options` parameter to the addEventListener function
* Set to `true` to use capture.
* Usually used as an object to add the listener as `passive`
*/
g.addDynamicEventListener = function (rootElement, eventType, selector, callback, options) {
// Polyfil Element.matches
// https://developer.mozilla.org/en/docs/Web/API/Element/matches#Polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function (s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {
}
return i > -1;
};
}

/**
* Returns a modified callback function that calls the
* initial callback function only if the target element matches the given selector
*
* @param {string} selector
* @param {function} callback
*/
function getConditionalCallback(selector, callback) {
return function (e) {
if (!e.target) return;
if (!e.target.matches(selector)) return;
callback.apply(this, arguments);
};
}

rootElement.addEventListener(eventType, getConditionalCallback(selector, callback), options);
};
/**
* layer.photos支持手势缩放
* 参考链接:https://segmentfault.com/u/summerxiay
*/
g.enableLayerPhotosFingerZoom = function () {
function handle(event) {
var $me = $(event.target);
var touch1 = event.targetTouches[0]; // 第一根手指touch事件
var touch2 = event.targetTouches[1]; // 第二根手指touch事件
var fingers = event.touches.length; // 屏幕上手指数量
var context = $me.data("context");
if (!context) {
context = {};
context.one = false;
context.originalWidth = $me.width();
context.originalHeight = $me.height();
context.baseScale = parseFloat(context.originalWidth / context.originalHeight);
$me.data("context", context);

$me.parents('.layui-layer-content').css('overflow', 'unset');
$me.parents('.layui-layer-photos').css('background', 'none');
$me.next(".layui-layer-imgsee").remove();
}

//手指放到屏幕上的时候,还没有进行其他操作
if (event.type == 'touchstart') {
if (fingers == 2) {
// 缩放图片的时候X坐标起始值
context.startX = Math.abs(touch1.pageX - touch2.pageX);
context.one = false;
} else if (fingers == 1) {
context.x1 = touch1.pageX;
context.y1 = touch1.pageY;
context.one = true;
}
context.imgLeft = parseInt($me.css('left'));
context.imgTop = parseInt($me.css('top'));

context.startTime = new Date().getTime();
}
//手指在屏幕上滑动
else if (event.type == 'touchmove') {
if (fingers == 2) {
// 缩放图片的时候X坐标滑动变化值
context.endX = Math.abs(touch1.pageX - touch2.pageX);
context.scale = context.endX - context.startX;
$me.css({
'width': context.originalWidth + context.scale,
'height': (context.originalWidth + context.scale) / context.baseScale,
'left': context.imgLeft + context.scale / 2,
'top': context.imgTop + context.scale / context.baseScale / 2
});

} else if (fingers == 1) {
context.x2 = touch1.pageX;
context.y2 = touch1.pageY;
if (context.one) {
$me.css({
'left': context.imgLeft + (context.x2 - context.x1),
'top': context.imgTop + (context.y2 - context.y1)
});
}
}
}
//手指移开屏幕
else if (event.type == 'touchend') {
// 手指移开后保存图片的宽
context.originalWidth = $me.width();
context.imgLeft = parseInt($me.css('left'));
context.imgTop = parseInt($me.css('top'));

if (new Date().getTime() - context.startTime <= 300) {
//从start到end,时间很短,则代表fastclick,直接关闭预览
var id = $me.parents('.layui-layer-photos').attr('id');
var idx = id.replace("layui-layer", "");
layer.close(idx);
}
}

event.preventDefault();
event.stopPropagation();
};

g.addDynamicEventListener(document, 'touchstart', ".layui-layer-phimg img", handle, {passive: false});
g.addDynamicEventListener(document, 'touchmove', ".layui-layer-phimg img", handle, {passive: false});
g.addDynamicEventListener(document, 'touchend', ".layui-layer-phimg img", handle, {passive: false});
};

$(document).ready(function () {
g.enableLayerPhotosFingerZoom();
});
附PC端鼠标滚轮缩放:https://fly.layui.com/jie/17309/
回帖
  • 消灭零回复