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

問題描述

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

問題解答

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

讓設計出一張【手機殼的遮罩圖】，繪制挖空的手機輪廓，并補上背面攝像頭、按鍵等位置。

將遮罩圖疊放在壁紙圖片上（保證 z-index 更高即可），而后 JS / CSS 動態更改下方的壁紙圖片。