微信小程式的樣式屬性 transform:Matrix()是一個非常強大的功能，通過這個組建可以實現非常多的圖形變化，位移等功能。

下面上位移樣例：

如圖，我要在紅色區域內移動圖片，而這個圖片是有一個原始樣式的，也就是它本身是有一個matrix（x,x,x,x,x,x）屬性的，所以我只要在後臺不斷更改它的屬性就可以了。

1）：

需要給這張圖片一個滑動觸發的方法bindtouchmove=moveImg。在js檔案裡書寫方法 首先moveImg(res)裡res會自動封裝它觸發的位置資訊封裝在res.touches[0]

裡面，我們可以獲取到它的pageX和pageY，但是注意的是這裡的x和y是絕對位置的值，也就是在整個螢幕左上角為起始點，而matrix

是相對位置，我設定的它的背景圖為它的相對點，也就是說（0，0）是紅色背景的左上角第一個點，所以要進行計算一下。

2）：

計算相對位置的方法呢，就看你背景怎麼設定了，這裡呢 我的藍色背景是佔到整個螢幕width的20%，而紅色背景是居於白色背景
的中心，所以有紅色背景的width就可以很輕鬆算出絕對位置到相對位置的pageX和pageY，然後setdata一下，將屬性儲存到js

中。

3）：

就是設定邊界了，其實也比較簡單，就是在setdata前判斷一下，如果

藍色背景寬度+（白色背景寬度-紅色背景寬度）/2<pageX<總的寬度-（白色背景寬度-紅色背景寬度）/2

那就可以設定，要不然就不能設定。

4):

最後就很簡單啦，將圖片的樣式中的transform:matrix(x,x,x,x,{{pageX}},{{pageY}})就可以啦

等我做出來放大和縮小再來寫。。。