JavaScript 圖片切割效果(放大鏡)第1/4頁

2019-11-21 01:31:52

字體：大中小

來源：轉載

供稿：網友

上一個版本由于是初次接觸這類效果，而且是三個大功能一起開發，能力所限，所以僅僅是實現了效果就完成了。
近來我把其中的拖放效果和縮放效果單獨出來研究，經過整理和完善，再套進切割效果，個人感覺效果已經不錯了。
要說明的是這個只是一個效果，并不是真正的切割圖片，要獲取真正的切割圖片請參考圖片切割系統。
效果預覽請看這里
完整實例下載
代碼太多貼不出來，只好給個效果圖：

程序說明

這個效果主要分三個部分：層的拖放、層的縮放、圖片切割（包括預覽）。
其中層的拖放和層的縮放我已經在其他兩篇文章中有詳細說明，這里就說說圖片切割這部分吧。

圖片切割

關于圖片切割的設計，有三個方法：

把圖片設為背景圖，通過設置背景圖的位置來實現，但這樣的缺點是只能按圖片的正常比例實現，不夠靈活；
把圖片放到切割對象里面，通過設置圖片的top和left實現，這個方法是可行，但下面有更簡單的方法實現；
通過設置圖片的clip來實現。
這里介紹方法3的實現方法，這個方法是從當年“珍藏”的代碼中看到的，先說說clip：
clip的作用是“檢索或設置對象的可視區域。可視區域外的部分是透明的。”
依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值來剪切。
例如：

復制代碼代碼如下:

div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }

注意position:absolute的設置是必須的（詳細看手冊）。
下面說說具體實現原理：

首先需要一個容器(_Container)，容器里面會插入三個層：

底圖層(_layBase)：那個半透明的圖片；
切割層(_layCropper)：正常顯示的那個部分；
控制層(_layHandle)：就是控制顯示的那個部分。
其中為了底圖層和切割層是程序自動創建的圖片，控制層是自己定義的層（程序中是一個div）。
底圖層和切割層必須完全重合，程序中把這兩個層都絕對定位到了左上角：

復制代碼代碼如下:

this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0; 

層疊順序也要設置一下保證各層順序。

12 3 4 下一頁閱讀全文

上一篇：JavaScript 拖放效果代碼

下一篇：js 設置css的定位

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

JavaScript 圖片切割效果(放大鏡)第1/4頁