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

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

找了一圈,找到一个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 图片查看组件,可以直接用,不用这么绕圈圈了。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现移动端图片预览,可以使用一些现成的库,例如PhotoSwipe、viewer.js等,也可以自己实现。 以下是一个简单的实现步骤: 1. 首先,需要监听图片点击事件,当图片点击时,显示预览框,并在预览框中显示图片。 2. 接下来,需要实现手势缩放和手势拖动。可以借助Hammer.js等手势库来实现,当用户在图片上进行缩放或拖动时,修改图片的样式,实现缩放和拖动效果。 3. 双击放大功能可以通过监听双击事件来实现,当用户双击图片时,将图片放大到一定的比例。 4. 最后,需要注意一些细节问题,例如在缩放时限制最大最小缩放比例,避免图片过小或过大,同时在预览框中显示图片时,需要对图片进行居中处理,以保证用户体验。 下面是一个简单的示例代码: ```html <!-- HTML部分 --> <div class="preview-container"> <img src="your-image-url" class="preview-image"> </div> ``` ```css /* CSS部分 */ .preview-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; } .preview-image { max-width: 100%; max-height: 100%; } ``` ```javascript // JavaScript部分 var previewContainer = document.querySelector('.preview-container'); var previewImage = document.querySelector('.preview-image'); // 监听图片点击事件 previewImage.addEventListener('click', function() { previewContainer.style.display = 'flex'; }); // 初始化手势库 var mc = new Hammer.Manager(previewImage); mc.add(new Hammer.Pinch()); mc.add(new Hammer.Pan({ threshold: 0 })); var scale = 1, lastScale = 1; var posX = 0, posY = 0, lastPosX = 0, lastPosY = 0; // 监听手势事件 mc.on('pinchstart', function(e) { lastScale = scale; }); mc.on('pinchmove', function(e) { scale = Math.max(1, Math.min(lastScale * e.scale, 3)); previewImage.style.transform = 'scale(' + scale + ') translate(' + posX + 'px,' + posY + 'px)'; }); mc.on('pinchend', function(e) { lastScale = scale; }); mc.on('panstart', function(e) { lastPosX = posX; lastPosY = posY; }); mc.on('panmove', function(e) { posX = lastPosX + e.deltaX; posY = lastPosY + e.deltaY; previewImage.style.transform = 'scale(' + scale + ') translate(' + posX + 'px,' + posY + 'px)'; }); // 监听双击事件 previewImage.addEventListener('dblclick', function() { if (scale === 1) { scale = 2; previewImage.style.transform = 'scale(' + scale + ') translate(' + posX + 'px,' + posY + 'px)'; } else { scale = 1; posX = 0; posY = 0; previewImage.style.transform = 'scale(' + scale + ') translate(' + posX + 'px,' + posY + 'px)'; } }); // 点击预览框关闭预览 previewContainer.addEventListener('click', function() { previewContainer.style.display = 'none'; scale = 1; posX = 0; posY = 0; previewImage.style.transform = 'scale(' + scale + ') translate(' + posX + 'px,' + posY + 'px)'; }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值