js设置div缩放 与双指缩放
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; }); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2021-03-08 js 判断url格式