JAVAScript：mobile端，基于transform-origin和tranform（scale），实现表格缩放

需求：

1，实现表格区域的缩放，而不是整个页面。整个页面包含toolbar + table。 其中只缩放table区域

2，已用户操作处进行缩放，而不是固定的某个点，例如中心点，或左上角，笔记缩放时，数据跳动

实现的基本原理：

利用transform-origin，来确定进行缩放的固定点，也就是用户进行缩放的点， 同时利用transform:scale(value)来实现缩放

踩过的坑：

1，如果计算用户实际操作时，所选取的进行缩放的固定点：

读取用户两个手指的touch点，之后通过手指间的计算中心点，作为缩放的固定点，公式如下：

    scalePointX = (touch1.X + touch2.X) / 2 - targetTable.X;

    scalePointY = (touch1.Y + touch2.Y) / 2 -targetTable.Y;

2, 当scale不为零时，修改transform-origin，会导致按照新的固定点，从新scale，这就会导致表格移动

为了避免用户对于表格移动的感知，需要在设置完transform-origin之后，将表格移动回到之前的数据的位置。

这里的坑最深，因为scale的加入，导致坐标系和实际的位置，产生了差异，举个例子，table在scale之前，坐标是（0，0），之后以（0，0）作为固定点，放大。这个时候，看到是原来的左上角，因为放大，而像左上方放生了移动，那么这个时候，坐标系到底放生了什么变化？   这里我们利用JQuery可以发现：

    1）坐标系没有发生变化，也就是css('left')和css('top')保持不变

    2）但 JQuery.position()却发生了变化，left和top变成了负值

也就是说，利用JQuery里css和position属性，在scale时的不同表现，我们可以利用position在修改transform-origin前后的变化，计算出表格在视觉上发生的移动，之后通过这个值，反向设置css里的left和top值，实现把表格移动回到原来视图位置，使得用户感知不到因为transform-origin的变化，而导致的表格移动。

        moveOnX = originalPosition.left - currentPosition.left;

        moveOnY = originalPosition.top - currentPosition.top;

        targetTable.css('left', <originalX> + moveOnX);

        targetTable.css('top', <originalY> + moveOnY);