Dreamweaver中想要將一幅畫分割成幾份在框內(nèi)進(jìn)行拼圖游戲；當(dāng)靠近真確的拼圖時(shí)自動(dòng)吸附，該怎么制作這個(gè)動(dòng)畫效果呢？下面我們就來看看詳細(xì)的教程。

1、在軟件中新建一個(gè)頁面點(diǎn)擊創(chuàng)建

2、點(diǎn)擊-頁面設(shè)置選擇一張背景圖片

3、點(diǎn)擊工具欄繪制邊框

4、選中邊框-點(diǎn)擊代碼-重命名為bj-找到背景代碼

5、找到邊框代碼-刪除默認(rèn)樣式顏色的邊框代碼

6、選擇輸入邊框樣式和顏色代碼

7、在繪制四個(gè)邊框設(shè)置為透明色

8、按下shift鍵一次點(diǎn)擊選中4個(gè)邊框點(diǎn)擊-修改選項(xiàng)-排列順序-設(shè)置寬度相同-在進(jìn)行一次設(shè)置高度相同

9、一次打開分割好的四張圖片拖拽只邊框1、2、3、4

10、拉兩條 輔助線豎線對(duì)齊250。橫線對(duì)齊標(biāo)尺150處然后拖動(dòng)圖片拼成一副完整的圖片

11、點(diǎn)擊邊框1開始設(shè)置-拖動(dòng)AP元素-自動(dòng)獲取當(dāng)前位置-距離20個(gè)像素自動(dòng)吸附，一次用相同的方法設(shè)置完4個(gè)邊框

12、打亂圖片保存你就可以在瀏覽器中玩拼圖了

以上就是Dreamweaver制作拼圖游戲的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注VeVb武林網(wǎng)。