javascript - 類似於這種的功能實現的思路

Question

1.一個DIY手機殼的網站
http://www.xyppt.com/app/html/index.html?businessld=121
下方一排圖片，點擊圖片就更改手機殼上的圖片。

Answer 1

假設有若干幅 base 桌面壁紙圖片，要在前端【PS】到手機殼上。一個簡單的思路是：

1. 讓設計出一張【手機殼的遮罩圖】，繪製挖空的手機輪廓，並補上背面相機、按鍵等位置。

2. 將遮罩圖疊放在桌布圖片上（保證 z-index 更高即可），而後 JS / CSS 動態變更下方的桌布圖片。