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