|
第一版看這里
自上一個(gè)版本的圖片切割效果出來(lái)后，雖然也經(jīng)�？吹健翱蚣荛_發(fā)這個(gè)如何如何容易”之類的評(píng)論，但也受到很多人的肯定，小弟在此感謝大家的支持。
上一個(gè)版本由于是初次接觸這類效果，而且是三個(gè)大功能一起開發(fā)，能力所限，所以僅僅是實(shí)現(xiàn)了效果就完成了。
近來(lái)我把其中的 拖放效果 和 縮放效果 單獨(dú)出來(lái)研究，經(jīng)過(guò)整理和完善，再套進(jìn)切割效果，個(gè)人感覺效果已經(jīng)不錯(cuò)了。
要說(shuō)明的是這個(gè)只是一個(gè)效果，并不是真正的切割圖片，要獲取真正的切割圖片請(qǐng)參考 圖片切割系統(tǒng) 。
效果預(yù)覽請(qǐng)看這里
完整實(shí)例下載
代碼太多貼不出來(lái)，只好給個(gè)效果圖：
程序說(shuō)明
這個(gè)效果主要分三個(gè)部分：層的拖放、層的縮放、圖片切割（包括預(yù)覽）。
其中 層的拖放 和 層的縮放 我已經(jīng)在其他兩篇文章中有詳細(xì)說(shuō)明，這里就說(shuō)說(shuō)圖片切割這部分吧。
圖片切割
關(guān)于圖片切割的設(shè)計(jì)，有三個(gè)方法：
- 把圖片設(shè)為背景圖，通過(guò)設(shè)置背景圖的位置來(lái)實(shí)現(xiàn)，但這樣的缺點(diǎn)是只能按圖片的正常比例實(shí)現(xiàn)，不夠靈活；
- 把圖片放到切割對(duì)象里面，通過(guò)設(shè)置圖片的top和left實(shí)現(xiàn)，這個(gè)方法是可行，但下面有更簡(jiǎn)單的方法實(shí)現(xiàn)；
- 通過(guò)設(shè)置圖片的clip來(lái)實(shí)現(xiàn)。
這里介紹方法3的實(shí)現(xiàn)方法，這個(gè)方法是從當(dāng)年“珍藏”的代碼中看到的，先說(shuō)說(shuō)clip：
clip的作用是“檢索或設(shè)置對(duì)象的可視區(qū)域。可視區(qū)域外的部分是透明的�！�
依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值來(lái)剪切。
例如：
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
注意position:absolute的設(shè)置是必須的（詳細(xì)看手冊(cè)）。
下面說(shuō)說(shuō)具體實(shí)現(xiàn)原理：
首先需要一個(gè)容器(_Container)，容器里面會(huì)插入三個(gè)層：
- 底圖層(_layBase)：那個(gè)半透明的圖片；
- 切割層(_layCropper)：正常顯示的那個(gè)部分；
- 控制層(_layHandle)：就是控制顯示的那個(gè)部分。
其中為了底圖層和切割層是程序自動(dòng)創(chuàng)建的圖片，控制層是自己定義的層（程序中是一個(gè)div）。
底圖層和切割層必須完全重合，程序中把這兩個(gè)層都絕對(duì)定位到了左上角：
this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;
層疊順序也要設(shè)置一下保證各層順序。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) JavaScript 圖片切割效果 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) JavaScript 圖片切割效果 [1]
第 2 頁(yè) 
