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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM