需求描述:
移动端图片点击可以放大预览。
找了一圈,找到一个github star 星星数不多,但是很满足需要 也很好用的插件。
github地址:
https://github.com/KyLeoHC/ImageViewer
demo地址:
http://freeui.org/imageViewer2/
使用方式很简单:
简单描述一下:
var imageViewer = new ImageViewer();
imageViewer.setOption({
// duration: 1000,
container: 'body',
autoLoadImage: true,
enableScale: true,
enableTapClose: true,
startIndex: 0
});
$("#imagewrap").on("click", function () {
var url = $(this).find('img').attr('src')
imageViewer.setImageOption([{ url: url }]);
imageViewer.open(0)
})
第一步:初始化示例
第二部: 设置示例属性setOption
第三步:可以动态setImageOption设置需要预览的图片
第四部 : 事件触发时调用实例的open方法
具体可以看实例demo
还有另外一个github星星700+的项目,大概看了一下,也是可以的,没有具体去研究。
https://github.com/manuelstofer/pinchzoom
文档:http://manuelstofer.github.io/pinchzoom/
另外,如果你的移动端项目是vue写的,那么,不妨引入vant-uid 图片查看组件,可以直接用,不用这么绕圈圈了。