关于transform动画先放大再移动,静止元素移出屏幕范围

原理:通过juery的position()或者offfet()方法获取目标距离父标签的距离来判断是否超出屏幕

先移动,没有缩放,取得目标距离父标签的距离

再放大后,目标标签距离父标签的距离被改变 

 

var canvas = $("#the-canvas");
var el = document.getElementById('the-canvas');
var initScale = 1; //初始化缩放倍数
//AlloyFinger手势库缩放与移动
new AlloyFinger(el,{
    //缩放
    pinch:function(_e){
        el.scaleX = el.scaleY = initScale*_e.zoom;//
    },
    //移动
    pressMove:function(evt){
				console.log(canvas.position().top);
				el.translateX += evt.deltaX;
                el.translateY += evt.deltaY*1.5;

                
    },
    multipointEnd: function(){

				//console.log('多点触控结束')
				if (el.scaleX < 1) {
                   el.scaleX = el.scaleY = 1;
                    
				}else if(el.scaleX>3){
					 el.scaleX = el.scaleY = 3;
				}
				initScale=el.scaleX;
	},
}