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;
        });
    }

 

posted @ 2022-03-08 10:22  mingruqi  阅读(1301)  评论(0编辑  收藏  举报