最近做了一個jquery圖片查看的插件，目的是能精確查看圖片的詳情，插件支持圖片旋轉、放大、縮小、拖拽、縮略圖顯示，界面效果是按照window的qq查看圖片功能寫的，當然不盡相同。
具體功能：
1. 多張圖片切換，鍵盤左右鍵或左右箭頭切換
2. 旋轉
3. 放大，支持鼠標滾輪
4. 縮小，支持鼠標滾輪
5. 右下角縮略圖
6. 拖拽大圖
7. 全屏
PS：下面是插件各狀態下效果，demo示例會在最后放出來。
全屏
全屏是容器的最大化。
縮小
可以點擊縮小圖標或者鼠標滾輪向下滾，可以縮小圖片。
放大
可以點擊放大圖標或者鼠標滾輪向上滾，可以放大圖片。當圖片長或寬大於容器時候，就會出現右下角的縮略圖。
旋轉
旋轉是使用css3實現的。
拖拽圖片
大圖區域和縮略圖區域都是可以拖拽的，可以通過拖拽查看圖片某個位置。
旋轉拖拽
實現插件過程中，這個是最困難的地方，旋轉加上拖拽圖片，計算方式復雜很多。
切換圖片
插件支持多張圖片切換查看，可以通過鍵盤左右鍵或左右箭頭切換。
總結
這個插件耗時4天才寫好，難點在於圖片旋轉之后兼顧其他功能。實現的詳情就不細說了，附上demo示例。
我把源代碼放在Github上了，有需要的可去下：https://github.com/codingforme/jquery-photo-gallery
PS:注意全屏、關閉的功能需要將示例部署起來才能演示，不然會有跨域問題。
注意
1. 瀏覽器兼容問題
由於我這個插件只需要在Chrome上使用（我現在項目的特別之處），所以其他瀏覽器我並沒有去做兼容，使得IE、firefox瀏覽器都相應會有一些問題。像旋轉在IE9以下當然用不了（css3的原因），拖拽也會因為方法或屬性的不兼容導致有問題。
PS：所以如果要使用我的插件，估計需要對插件做一些兼容處理，不然就得等我找時間做了。
2. 拖拽不平滑
這個問題我也發現了，確實是在大圖拖拽時候有卡頓現象，這個我也將稍后修復。
20160312修復問題
1. 修復了拖拽不平滑問題。
2. 對Firefox、Chrome、Safari、IE9+進行兼容。
PS：暫時沒有考慮兼容IE9以下。
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。