最近做了一個jquery圖片查看的插件，目的是能精確查看圖片的詳情，插件支持圖片旋轉(zhuǎn)、放大、縮小、拖拽、縮略圖顯示，界面效果是按照window的QQ查看圖片功能寫的，當(dāng)然不盡相同。

具體功能：

1. 多張圖片切換，鍵盤左右鍵或左右箭頭切換

2. 旋轉(zhuǎn)

3. 放大，支持鼠標(biāo)滾輪

4. 縮小，支持鼠標(biāo)滾輪

5. 右下角縮略圖

6. 拖拽大圖

7. 全屏

PS：下面是插件各狀態(tài)下效果，demo示例會在最后放出來。

全屏

全屏是容器的最大化。

縮小

可以點(diǎn)擊縮小圖標(biāo)或者鼠標(biāo)滾輪向下滾，可以縮小圖片。

放大

可以點(diǎn)擊放大圖標(biāo)或者鼠標(biāo)滾輪向上滾，可以放大圖片。當(dāng)圖片長或?qū)挻笥谌萜鲿r候，就會出現(xiàn)右下角的縮略圖。

旋轉(zhuǎn)

旋轉(zhuǎn)是使用CSS3實(shí)現(xiàn)的。

拖拽圖片

大圖區(qū)域和縮略圖區(qū)域都是可以拖拽的，可以通過拖拽查看圖片某個位置。

旋轉(zhuǎn)拖拽

實(shí)現(xiàn)插件過程中，這個是最困難的地方，旋轉(zhuǎn)加上拖拽圖片，計算方式復(fù)雜很多。

切換圖片

插件支持多張圖片切換查看，可以通過鍵盤左右鍵或左右箭頭切換。

總結(jié)

這個插件耗時4天才寫好，難點(diǎn)在于圖片旋轉(zhuǎn)之后兼顧其他功能。實(shí)現(xiàn)的詳情就不細(xì)說了，附上demo示例。

點(diǎn)擊下載-> jquery-photo-gallery

PS:注意全屏、關(guān)閉的功能需要將示例部署起來才能演示，不然會有跨域問題。

注意

1. 瀏覽器兼容問題

由于我這個插件只需要在Chrome上使用（我現(xiàn)在項(xiàng)目的特別之處），所以其他瀏覽器我并沒有去做兼容，使得IE、Firefox瀏覽器都相應(yīng)會有一些問題。像旋轉(zhuǎn)在IE9以下當(dāng)然用不了（css3的原因），拖拽也會因?yàn)榉椒ɑ驅(qū)傩缘牟患嫒輰?dǎo)致有問題。

PS：所以如果要使用我的插件，估計需要對插件做一些兼容處理，不然就得等我找時間做了。

2. 拖拽不平滑

這個問題我也發(fā)現(xiàn)了，確實(shí)是在大圖拖拽時候有卡頓現(xiàn)象，這個我也將稍后修復(fù)。

本文為原創(chuàng)文章，轉(zhuǎn)載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5004951.html