function zoomtale(){ /** * div 比例縮放 */ var tablediv_width=$(".resizeDiv").find(".layui-table-body.layui-table-main").eq(0).find("table").eq(0).find("tr").eq(0).width()+34; $(".resizeDiv").css('width',tablediv_width) var width = $(window).width(); var scale = (width-30)/tablediv_width; //設備默認寬度為810px var myminscale = scale; //按設備比例縮放div的比例 var scaleFunc = "scale("+scale+","+scale+")"; $(".resizeDiv").css({ "transform":scaleFunc, //縮放比例 "transform-origin":"left top", //縮放基點 "-ms-transform":scaleFunc, /* IE 9 */ "-ms-transform-origin":"left top", "-moz-transform":scaleFunc, /* Firefox */ "-moz-transform-origin":"left top", "-webkit-transform":scaleFunc, /* Safari 和 Chrome */ "-webkit-transform-origin":"left top", "-o-transform":scaleFunc, /* Opera */ "-o-transform-origin":"left top", }); /** * 雙指縮放 * @type {{scale: number}} */ var store = { scale: 1 }; // 縮放事件的處理 document.addEventListener('touchstart', function (event) { var touches = event.touches; var events = touches[0]; var events2 = touches[1]; event.preventDefault(); // 第一個觸摸點的坐標 store.pageX = events.pageX; store.pageY = events.pageY; store.moveable = true; if (events2) { store.pageX2 = events2.pageX; store.pageY2 = events2.pageY; } store.originScale = store.scale || 1; }); document.addEventListener('touchmove', function (event) { if (!store.moveable) { return; } event.preventDefault(); var touches = event.touches; var events = touches[0]; var events2 = touches[1]; // 雙指移動 if (events2) { // 第2個指頭坐標在touchmove時候獲取 if (!store.pageX2) { store.pageX2 = events2.pageX; } if (!store.pageY2) { store.pageY2 = events2.pageY; } // 獲取坐標之間的舉例 var getDistance = function (start, stop) { return Math.hypot(stop.x - start.x, stop.y - start.y); }; // 雙指縮放比例計算 var zoom = getDistance({ x: events.pageX, y: events.pageY }, { x: events2.pageX, y: events2.pageY }) / getDistance({ x: store.pageX, y: store.pageY }, { x: store.pageX2, y: store.pageY2 }); // 應用在元素上的縮放比例 var newScale = store.originScale * zoom; // 最大縮放比例限制 if (newScale > 3) { newScale = 3; } if (myminscale>=newScale){ newScale=myminscale; }else { if (newScale>=1){ newScale=1; } } // 記住使用的縮放值 store.scale = newScale; // 圖像應用縮放效果 //按設備比例縮放div的比例 var scaleFunc = "scale("+newScale+","+newScale+")"; $(".resizeDiv").css({ "transform":scaleFunc, //縮放比例 "transform-origin":"left top", //縮放基點 "-ms-transform":scaleFunc, /* IE 9 */ "-ms-transform-origin":"left top", "-moz-transform":scaleFunc, /* Firefox */ "-moz-transform-origin":"left top", "-webkit-transform":scaleFunc, /* Safari 和 Chrome */ "-webkit-transform-origin":"left top", "-o-transform":scaleFunc, /* Opera */ "-o-transform-origin":"left top", }); } }); document.addEventListener('touchend', function () { store.moveable = false; delete store.pageX2; delete store.pageY2; }); document.addEventListener('touchcancel', function () { store.moveable = false; delete store.pageX2; delete store.pageY2; }); }
