其他分享
首页 > 其他分享> > 特殊需求解决办法:移动端图片点击放大查看预览,可移动可缩放。

特殊需求解决办法:移动端图片点击放大查看预览,可移动可缩放。

作者:互联网

需求描述:
移动端图片点击可以放大预览。

找了一圈,找到一个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,预览,imageViewer,缩放,url,示例,移动,true
来源: https://blog.csdn.net/qq_42991509/article/details/117258619