帆布與jQuery

Question

查看我在尋找類似

http://www.art.com/products/p10300303-sa-i809278/joan-miro-bleu-ii.htm?sorig=cat&sorigid=0&dimvals=24099&ui=a06af6d911c64e728faeee7c8a861b2e

在頁面上，請點擊查看房間（在PIC的右下角）。它將顯示圖片在應用於房間時的外觀（基本上超級強加在房間牆上的圖片）。 art.com使用閃光燈製作。我正在尋找如何在HTML5/JavaScript中做到這一點。任何指針都是值得歡迎的！

在此先感謝。

Answer 1

這應該相當簡單。

您可以將背景或「房間」圖像添加爲背景中的靜態圖像，並將圖片添加爲可拖動的另一個元素。最後，您將添加另一個元素作爲可拖動的容器，這將是您希望用戶能夠拖動圖片的背景照片上的區域。

見http://jqueryui.com/demos/draggable/

<img id="background" src="backgroundImage.png" /> 
<div id="bounds"></div> 
<div id="draggableImage"> 
    <img id="picture" src="picture.png" /> 
</div> 

然後

$('#draggableImage').draggable({ 
    'containment' : $('#bounds').eq(); 
}); 

使用CSS來塑造「邊界」元素是你想要的圖片拖動到（例如，你不想要將圖片拖到地板上）。