關於transform動畫先放大再移動,靜止元素移出螢幕範圍
阿新 • • 發佈:2018-11-07
原理:通過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; }, }