0
点赞
收藏
分享

微信扫一扫

jQuery双指放大缩小页面内容

沐之轻语 2022-04-14 阅读 38
javascript
// 放大倍数
let num = 1.0;
// 起始位置
let start = [];

    function bindListener() {
        $("body").on("touchstart", function (e) {
            // 一根 手指 执行 目标元素移动 操作
            if (e.originalEvent.touches.length == 1) {

            }
            ;
            // 2 根 手指执行 目标元素放大操作
            if (e.originalEvent.touches.length >= 2) {
                //得到第一组两个点
                // initX = e.target.offsetLeft;
                // initY = e.target.offsetTop;
                start = e.originalEvent.touches;
            }
            ;
        })
        $("body").on("touchmove", function (e) {
            e.preventDefault();
            // 一根 手指 执行 目标元素移动 操作
            // console.log(e)
            if (e.originalEvent.touches.length == 1) {

            }
            ;
            // 2 根 手指执行 目标元素放大操作
            if (e.originalEvent.touches.length >= 2) {
                //得到第二组两个点

                let now = e.originalEvent.touches;
                // Math.abs(e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX)
                // 当前距离变小, getDistance 是勾股定理的一个方法
                if (getDistance(now[0], now[1]) < getDistance(start[0], start[1])) {
                    //缩小
                    if (num > 0.4) {
                        num -= 0.05;
                        $('#content>div').css('transform', 'scale(' + num + ')');
                        // $('#content>div').css('transform-origin',''+pagex+' '+pagey+'');
                        if (num > 1) {
                            $('#content>div').css('transform-origin', 'left top');
                        } else {
                            $('#content>div').css('transform-origin', 'center top');
                        }
                        $('#content>div').css('transition', 'all 0.5s');
                    }
                } else {
                    //放大
                    if (num < 3) {

                        num += 0.05;
                        $('#content>div').css('transform', 'scale(' + num + ')');
                        if (num > 1) {
                            $('#content>div').css('transform-origin', 'left top');
                        } else {
                            $('#content>div').css('transform-origin', 'center top');
                        }
                        $('#content>div').css('transition', 'all 0.5s');
                        start = [now[0], now[1]];
                    }

                }
                ;

            }
            ;
        })
    }

    function getDistance(p1, p2) {
        var x = p2.pageX - p1.pageX,
            y = p2.pageY - p1.pageY;
        return Math.sqrt((x * x) + (y * y));
    };
举报

相关推荐

0 条评论