1. 程式人生 > >關於transform動畫先放大再移動,靜止元素移出螢幕範圍

關於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;
	},
}