寫了一個jQuery.imagesview插件,支持圖片拖動、縮放類似ACDSEE效果
做項目的時候客戶總是比較關心前臺界面,這不最近又遇到一個難纏的客戶。要求在前臺的縮略圖點開后查看高分辨率的圖片,并且最好能像ACDSEE那樣方便瀏覽,支持拖動、按比例放大縮小。
這樣的效果記得在SINA的某個欄目看到過,影響中好像是FLASH做的,我很多年沒碰過FLASH了,對現在的ACTION腳本不是很熟悉,于是想到結合JQUERY來實現,JQUERY的ThickBox支持圖片瀏覽但不是客戶要的效果,在GOOGLE搜索了半天沒找到一個好用的JS代碼,只好自己來寫了。
先看效果(點下面的圖片和連接即可)
同樣支持文字連接
支持 IE 7+、FireFox 1.5+ (PC, Mac)、Safari2+、Opera9+、Chrome0.3+
我測試了一下應該在 谷歌瀏覽器、IE7、FIREFOX3.0 下都能看到效果的,呵。。
為了給大家展示這個效果可費了我不少時間,主要是這個博客不支持在內容里定義CSS樣式文件。
而且CNBLOGS后臺編輯對 Chrome 支持不是很好,只好開N個瀏覽器來回折騰~~
看不到效果的只好看下面這張圖了:
相關文件(文章最后的附件中都有這些文件):
------------------------------------------------------------------------------------------------ imagesview.css --樣式文件
imagesview.js --ImageView JS文件
toolsico.gif --按鈕圖標
loadingAnimation.gif --加載動畫
jquery.js --JQUERY腳本庫,請使用jQuery 1.2.6 以上版,否則拖動有點問題
使用方法:
-----------------------------------------------------------------------------------------
頁面頭部引用 imagesview.css、imagesview.js、jquery.js即可(兩個GIF圖片文件和CSS文件放在同一目錄)
文字連接:同樣支持文字連接
其中 class="imagesview" 是必須的,title="。。" 這里是標題,可以不定義。
所有相關文件附件中提供下載: