近期将以前写的一些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