SlwUi（Super Lightweight UI）前端js插件系列（1）圖片縮略SlwThumb，圖片瀏覽器SlwViewer, 圖片播放SlwSlider，圖片剪裁SlwCropper

      近期將以前寫的一些jQuery插件整理了一下，供交流參考，由於實際需要js插件的原則是做到瀏覽器版本的儘量兼容。SlwUi的更多內容將陸續開放。今天介紹系列（1）圖片縮略SlwThumb，圖片瀏覽器SlwViewer, 圖片播放SlwSlider插件。

基於jQuery，瀏覽器兼容（Browser Support）

• Internet Explorer: 6, 7, 8, 9, 10, 11
• Chrome
• Edge
• Firefox
• Safari
• Opera

1、圖片縮略SlwThumb

如果是基於CSS3很簡單，如下：

$el.css({
	'width' : o.thumbW + 'px',
	'height' : o.thumbH + 'px',
	'background-image' : 'url("' + o.url + '")',
	'background-repeat' : 'no-repeat',
	'background-position' : '50% 50%',
	'background-size' : 'cover'
});

但問題是無法兼容低版本的IE瀏覽器，下面代碼做到瀏覽器全兼容。

源碼：https://github.com/wang-weidong/SlwThumb

Demo: https://wang-weidong.github.io/SlwThumb/demo/index.html

2、圖片瀏覽器SlwViewer

支持對一組圖片的縮略、縮放、旋轉、翻轉等操作，支持鍵盤操作。

學習參考了 Fengyuan Chen 的代碼及CSS樣式，重構、精簡併兼容了瀏覽器，參見https://github.com/fengyuanchen/viewer

代碼：https://download.csdn.net/download/qq_38562705/10725680

Demo: https://wang-weidong.github.io/SlwViewer/demo/index.html

3、圖片播放SlwSlider

一個簡單的圖片輪播插件，如下：

源碼：https://github.com/wang-weidong/SlwSlider

Demo: https://wang-weidong.github.io/SlwSlider/demo/index.html

4、圖片剪裁SlwCropper

jQuery image cropper圖片剪裁插件，非常精簡，兼容IE6,7,8,9,10,11+, Chrome, Edge, Firefox, Safari, Opera，支持對圖片選取，剪裁，base64, 預覽支持對一組圖片的縮略、縮放、旋轉、翻轉等操作，支持鍵盤操作。

 

代碼：https://download.csdn.net/download/qq_38562705/10725669

Demo: https://wang-weidong.github.io/SlwCropper/demo/index.html