一、元件準備此效果設計到四個(gè)元件：内容頁；背景圖片上；背景圖片下(xià)；拖動條。

1. 内容頁

内容頁動态面闆長(cháng)度設爲1200，高(gāo)度設爲600。

然後在裏面自上而下(xià)建立四個(gè)長(cháng)方形，分(fēn)别填寫内容，命名1、2、3、4。其中 1 号、 4 号長(cháng)度設爲1200，高(gāo)度設爲600。 2 号、 3 号長(cháng)度設爲1200，高(gāo)度設爲350。然後中間間隔距離爲 300 一次排開，設爲一組。

2. 背景圖片上/下(xià)

背景圖片頁動态面闆長(cháng)度設爲1200，高(gāo)度設爲300，各添加 3 個(gè)切換頁面。按照(zhào)上下(xià)位置緊貼著(zhe)對(duì)其排列，同時(shí)在界面中分(fēn)别放入三張長(cháng)1200、高(gāo)度 600 的(de)圖片。

3. 拖動條

拖動條畫(huà)成常規格式即可(kě)。

長(cháng)度根據需要計算(suàn)，本仿真滾動條移動範圍爲 0 至600，内容頁移動範圍爲- 2200 至2800，所以我将其高(gāo)度設爲160，使内容頁的(de)移動距離等于 5 倍的(de)滾動條移動距離（後續公式中要使用(yòng)）。

二、交互動作完成元件的(de)建立後，将内容頁完整的(de)蓋到背景圖片上/下(xià)，将滾動條上端對(duì)其放置在内容頁右側及可(kě)以開始設計交互動作。

1. 拖動條

首先在滾動條上添加用(yòng)例拖動時(shí)：先移動“拖動條”爲“垂直拖動”，設置邊界爲 0 至 600 範圍内；然後設置移動内容頁内的(de)“1、2、3、 4 的(de)組”爲“相對(duì)位置”，x=0，y=[[(-DragY)*5]]（前面算(suàn)過内容頁移動距離是拖動條移動距離的(de) 5 倍，拖動條向下(xià)移動時(shí)，内容頁向上移動，所以爲(-DragY)*5），設置邊界爲- 2200 至 2800 範圍内。

2. 内容頁

因爲我們要實現的(de)效果是，當内容頁1、 2 之間的(de)縫隙經過時(shí)看到的(de)是背景圖片1；内容頁2、 3 之間的(de)縫隙經過時(shí)看到的(de)是背景圖片2，内容頁3、 4 之間的(de)縫隙經過時(shí)看到的(de)是背景圖片3。

同時(shí)我們将2、 3 的(de)高(gāo)度設置爲350，背景圖片頁上/下(xià)高(gāo)度爲300，所以在内容頁移動時(shí)，2、 3 可(kě)以完全覆蓋住背景圖片頁的(de)上或下(xià)，我們将在完全覆蓋的(de)時(shí)候進行背景頁的(de)切換，從而實現我們想要的(de)效果。

我們将内容頁 2 覆蓋背景圖片頁時(shí)，進行圖片 1 和(hé)圖片 2 的(de)切換，内容頁 3 覆蓋背景圖片頁時(shí)，進行圖片 2 和(hé)圖片 3 的(de)切換。

背景圖片上的(de)坐(zuò)标爲（0,0），背景圖片下(xià)的(de)坐(zuò)标爲（0,300），所以内容頁坐(zuò)标在 250 至 300 時(shí)完全覆蓋背景圖片下(xià)，将内容頁坐(zuò)标y等于 250 至 275 時(shí)背景圖片下(xià)轉換爲圖片2，坐(zuò)标y等于 275 至 300 時(shí)背景圖片下(xià)轉換爲圖片1。

同理(lǐ)内容頁完全覆蓋背景圖片上的(de)範圍爲- 50 至0，内容頁坐(zuò)标y等于- 25 至- 50 時(shí)背景圖片下(xià)轉換爲圖片2，坐(zuò)标y等于- 25 至 0 時(shí)背景圖片下(xià)轉換爲圖片1。

内容頁 2 設置好後，内容頁 3 同樣的(de)坐(zuò)标範圍隻是調整爲圖片 2 與圖片 3 的(de)切換即可(kě)。

然後運行一下(xià)程序就可(kě)以出來(lái)我們想要的(de)效果了(le)。