一、元(yuan)(yuan)件(jian)準備此效果(guo)設計到四個(ge)元(yuan)(yuan)件(jian)：內容頁；背景圖(tu)片上；背景圖(tu)片下；拖動條(tiao)。

1. 內容頁

內容頁動態面板長度設(she)為(wei)1200，高度設(she)為(wei)600。

然后在(zai)里(li)面自(zi)上(shang)而下(xia)建(jian)立四個長(chang)方形，分(fen)別(bie)填寫內容，命名(ming)1、2、3、4。其中 1 號、 4 號長(chang)度設為(wei)(wei)1200，高度設為(wei)(wei)600。 2 號、 3 號長(chang)度設為(wei)(wei)1200，高度設為(wei)(wei)350。然后中間間隔距(ju)離為(wei)(wei) 300 一次排開，設為(wei)(wei)一組。

2. 背景圖片上/下(xia)

背景(jing)圖片頁(ye)(ye)動態面板長度設為1200，高度設為300，各添(tian)加 3 個切(qie)換頁(ye)(ye)面。按照上下位置緊貼著對其排(pai)列，同時(shi)在界面中分別放(fang)入三張長1200、高度 600 的圖片。

3. 拖動條

拖動(dong)條(tiao)畫成(cheng)常(chang)規格式即可。

長度(du)根(gen)據需要(yao)計算，本仿(fang)真滾動(dong)條移(yi)動(dong)范圍為 0 至600，內(nei)容(rong)頁移(yi)動(dong)范圍為- 2200 至2800，所以我將其高度(du)設為160，使內(nei)容(rong)頁的(de)移(yi)動(dong)距離等于 5 倍的(de)滾動(dong)條移(yi)動(dong)距離（后續公式中(zhong)要(yao)使用）。

二、交互動(dong)作(zuo)(zuo)完成元件的(de)建立后，將內容(rong)頁完整的(de)蓋(gai)到背景圖片上(shang)/下，將滾動(dong)條(tiao)上(shang)端(duan)對其放置在內容(rong)頁右側及可以開始設計交互動(dong)作(zuo)(zuo)。

1. 拖動條

首先在(zai)滾動(dong)(dong)條上(shang)添加用(yong)例拖(tuo)動(dong)(dong)時(shi)：先移動(dong)(dong)“拖(tuo)動(dong)(dong)條”為“垂直(zhi)拖(tuo)動(dong)(dong)”，設置(zhi)邊(bian)界(jie)為 0 至(zhi) 600 范(fan)圍內(nei)(nei)；然后設置(zhi)移動(dong)(dong)內(nei)(nei)容(rong)(rong)頁內(nei)(nei)的“1、2、3、 4 的組”為“相對位置(zhi)”，x=0，y=[[(-DragY)*5]]（前面算過內(nei)(nei)容(rong)(rong)頁移動(dong)(dong)距離(li)是拖(tuo)動(dong)(dong)條移動(dong)(dong)距離(li)的 5 倍，拖(tuo)動(dong)(dong)條向下移動(dong)(dong)時(shi)，內(nei)(nei)容(rong)(rong)頁向上(shang)移動(dong)(dong)，所以(yi)為(-DragY)*5），設置(zhi)邊(bian)界(jie)為- 2200 至(zhi) 2800 范(fan)圍內(nei)(nei)。

2. 內容頁

因為(wei)我們要(yao)實現的(de)(de)效果是，當內容(rong)頁1、 2 之(zhi)間(jian)的(de)(de)縫隙經過(guo)時看到的(de)(de)是背景圖片1；內容(rong)頁2、 3 之(zhi)間(jian)的(de)(de)縫隙經過(guo)時看到的(de)(de)是背景圖片2，內容(rong)頁3、 4 之(zhi)間(jian)的(de)(de)縫隙經過(guo)時看到的(de)(de)是背景圖片3。

同時我們將2、 3 的(de)高度設置為350，背景(jing)圖片(pian)頁(ye)(ye)上/下高度為300，所以(yi)在內容頁(ye)(ye)移動時，2、 3 可以(yi)完(wan)全覆(fu)蓋住背景(jing)圖片(pian)頁(ye)(ye)的(de)上或下，我們將在完(wan)全覆(fu)蓋的(de)時候(hou)進(jin)行背景(jing)頁(ye)(ye)的(de)切換，從而實現我們想要的(de)效果(guo)。

我(wo)們將(jiang)內容頁 2 覆蓋背景圖(tu)(tu)(tu)片(pian)(pian)頁時，進行圖(tu)(tu)(tu)片(pian)(pian) 1 和圖(tu)(tu)(tu)片(pian)(pian) 2 的切換(huan)，內容頁 3 覆蓋背景圖(tu)(tu)(tu)片(pian)(pian)頁時，進行圖(tu)(tu)(tu)片(pian)(pian) 2 和圖(tu)(tu)(tu)片(pian)(pian) 3 的切換(huan)。

背景(jing)圖(tu)片(pian)上(shang)的(de)坐(zuo)標為（0,0），背景(jing)圖(tu)片(pian)下(xia)(xia)的(de)坐(zuo)標為（0,300），所以內容(rong)頁(ye)坐(zuo)標在(zai) 250 至 300 時完全覆(fu)蓋背景(jing)圖(tu)片(pian)下(xia)(xia)，將內容(rong)頁(ye)坐(zuo)標y等于(yu) 250 至 275 時背景(jing)圖(tu)片(pian)下(xia)(xia)轉換(huan)為圖(tu)片(pian)2，坐(zuo)標y等于(yu) 275 至 300 時背景(jing)圖(tu)片(pian)下(xia)(xia)轉換(huan)為圖(tu)片(pian)1。

同理內(nei)容(rong)頁(ye)完(wan)全覆蓋背景圖(tu)片(pian)上(shang)的(de)范圍為- 50 至0，內(nei)容(rong)頁(ye)坐標(biao)y等于- 25 至- 50 時背景圖(tu)片(pian)下轉換為圖(tu)片(pian)2，坐標(biao)y等于- 25 至 0 時背景圖(tu)片(pian)下轉換為圖(tu)片(pian)1。

內(nei)容頁 2 設置好后，內(nei)容頁 3 同樣的坐標范圍只是調整為(wei)圖片 2 與圖片 3 的切換即(ji)可。

然后運行(xing)一下程序就可(ke)以出來我們想要的效果(guo)了(le)。