新的一年，很久沒更博客了，眼看十一要來了，聽說過了十一就等過年了，但是感覺剛過完年一樣，心裏黯然神傷，更博一篇以表對小白駒過隙之神速聊以慰藉下……
在開發中這樣一個場景，web應用程序某處功能會接收來自各個戶上傳的圖片，後台有個圖片查看功能，實際生產過程中的結果出現了用戶上傳的圖片是倒轉的或者圖片因為遠距離拍攝上傳的比較模糊的情況。
分享之前推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。
1、解決圖片角度的問題
大概原理很簡單，切換HTML元素對象（圖片）的class。如下CSS代碼：
再添加簡單的JavaScript代碼——根據是向左轉還是向右轉動態改變class的名稱就行了。再次提示下，IE8瀏覽器是使用的是-ms-filter直接filter沒有效果。
這裡使用的是CSS3+filter濾鏡的方法，所以低版本的Firefox以目前版本的Opera瀏覽器下式沒有效果的。但絕對適用於90%以上的互聯網用戶了。
2、圖片放大縮小
即為調整圖片的寬和高。如下核心代碼
3、區域內拖動圖片
圖片放大超過父級容器時，支持圖片在容器內拖動，在mousedown的條件下綁定mousemove，計算拖拽區域大小，核心代碼如下：
4、綜合功能實現代碼如下，運行請底部下載demo
5、最終效果如下圖所示：
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/228139.html
微信掃一掃 
支付寶掃一掃 