h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放， 手势拖动，双击放大......

查看示例效果：

一、功能介绍

图片预览主要有以下几个功能点组成：监听图片点击事件，进入图片预览模式

自定义手势事件, (双指缩放，滑动，双击。。。)

监听图片手势事件，通过 transform-matrix 实现图片的各种变换；

二、实现方法

1、图片预览模式

图片预览即点击图片在页面中插入一个黑色全屏背景框并将图片居中显示。封装时，为了只对指定图片添加功能，可通过监听指定类名或添加某种属性的img标签监听；另外需在对背景框绑定点击事件，退出预览模式。一下是一个简单示例代码：//点击图片进入预览

var $Dom = document.querySelector(".preview");

$Dom.onclick = function() {

var temp = this.src;

var objE = document.createElement("div");

objE.innerHTML = '

' +

'' +

'

';

document.body.appendChild(objE.children[0]);

//退出图片预览事件

var $bg = document.querySelector(".bgM");

$bg.onclick = function() {

var dm = document.querySelector(".bgM");

document.body.removeChild(dm);

}

//阻止事件冒泡

var $img = document.querySelector(".img-custom-img2");

$img.onclick = function(event) {

event.stopPropagation();

}

}

复制代码

css样式参考.bgM{

width: 100%;

height: 100%;

position: absolute;

top: 0;left: 0;right: 0;bottom: 0;

z-index: 1000;

background-color: rgba(0,0,0,0.85);

overflow: hidden;

}

.bgM img{

width: 100%;

max-height:100%;

position: absolute;

top: 0;left: 0;right: 0;bottom: 0;

z-index: 1001;

margin: auto;

}

复制代码

2、自定义手势事件

这里通过监听移动端touch事件实现自定义双指缩放，单指滑动，双击事件，并通过事件属性传递相关参数，如缩放比例，滑动距离等，详细实现方式参考这篇博客：请参考此博文：https://www.cnblogs.com/pangys/p/9119845.html 这里只大概说明；当触发touch事件的时候，会生成一个TouchEvent对象，我们可通过其属性e.touches.length来判断是否多点触控，通过e.touches[index].pageX,e.touches[index].pageY获取去触点坐标，通过e.target获取dom节点；

这里为了方便，直接监听document事件然后对目标元素触发事件，实际也可以直接对img监听事件，然后分别处理；

(1)手势事件监听touchstart事件，若e.touches.