技巧｜div內部實現圖片旋轉、放大、縮小、拖拽

1、解決圖片角度的問題

大概原理很簡單，切換HTML元素對象(圖片)的class。如下CSS代碼：

再添加簡單的JavaScript代碼——根據是向左轉還是向右轉動態改變class的名稱就行了。再次提示下，IE8瀏覽器是使用的是-ms-filter直接filter沒有效果。

這裡使用的是CSS3+filter濾鏡的方法，所以低版本的Firefox以目前版本的Opera瀏覽器下式沒有效果的。但絕對適用於90%以上的互聯網用戶了。

2、圖片放大縮小

即為調整圖片的寬和高。如下核心代碼：

3、區域內拖動圖片

圖片放大超過父級容器時，支持圖片在容器內拖動，在mousedown的條件下綁定mousemove，計算拖拽區域大小，核心代碼如下：

4、綜合功能實現代碼如下，運行請底部下載demo

5、最終效果如下圖所示：

6、示例代碼下載地址： https://github.com/mszhtech/ImageView

想要學習更多IT知識，快加群:584539956 海量IT學習資料白給你~

學IT，就來中公優就業：http://www.ujiuye.com/

2017年【中公教育】特別推出2017年就業促進計劃，500萬就業基金助你成為IT達人

詳情請戳：http://www.ujiuye.com/zt/jycj/?wt.bd=bgz

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！