|
|
近來我把其中的 拖放效果 和 縮放效果 單獨出來研究，經(jīng)過整理和完善，再套進切割效果，個人感覺效果已經(jīng)不錯了。
要說明的是這個只是一個效果，并不是真正的切割圖片，要獲取真正的切割圖片請參考 圖片切割系統(tǒng) 。
效果預(yù)覽請看這里
完整實例下載
代碼太多貼不出來，只好給個效果圖：
程序說明
這個效果主要分三個部分：層的拖放、層的縮放、圖片切割（包括預(yù)覽）。
其中 層的拖放 和 層的縮放 我已經(jīng)在其他兩篇文章中有詳細說明，這里就說說圖片切割這部分吧。
圖片切割
關(guān)于圖片切割的設(shè)計，有三個方法：
把圖片設(shè)為背景圖，通過設(shè)置背景圖的位置來實現(xiàn)，但這樣的缺點是只能按圖片的正常比例實現(xiàn)，不夠靈活；
把圖片放到切割對象里面，通過設(shè)置圖片的top和left實現(xiàn)，這個方法是可行，但下面有更簡單的方法實現(xiàn)；
通過設(shè)置圖片的clip來實現(xiàn)。
這里介紹方法3的實現(xiàn)方法，這個方法是從當(dāng)年“珍藏”的代碼中看到的，先說說clip：
clip的作用是“檢索或設(shè)置對象的可視區(qū)域。可視區(qū)域外的部分是透明的?！?
依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標(biāo)計算的四個偏移數(shù)值來剪切。
例如：
復(fù)制代碼 代碼如下:
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
注意position:absolute的設(shè)置是必須的（詳細看手冊）。
下面說說具體實現(xiàn)原理：
首先需要一個容器(_Container)，容器里面會插入三個層：
底圖層(_layBase)：那個半透明的圖片；
切割層(_layCropper)：正常顯示的那個部分；
控制層(_layHandle)：就是控制顯示的那個部分。
其中為了底圖層和切割層是程序自動創(chuàng)建的圖片，控制層是自己定義的層（程序中是一個div）。
底圖層和切割層必須完全重合，程序中把這兩個層都絕對定位到了左上角：
復(fù)制代碼 代碼如下:
this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;
層疊順序也要設(shè)置一下保證各層順序。
JavaScript技術(shù)：JavaScript 圖片切割效果(放大鏡)第1/4頁，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
