- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <title> 原生 H5 两只手指控制图片放大缩小 </title>
- <style>
- html,body{width:100%;height:100%;overflow:hidden;position:fixed;margin:0;padding:0;}
- .cover {width:100%;height:100%;position:fixed;left:0;top:0;z-index:10000;display:none;}
- .cover div{position:absolute;background:#CCC;opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);}
- </style>
- </head>
- <body>
- <div class="cover" style="display:block;">
- <div style="width:20vw;height:100%;"></div>
- <div style="width:20vw;height:100%;left:80vw;"></div>
- <div style="width:60vw;height: 10%;left:20vw;"></div>
- <div style="width:60vw;height:100%;left:20vw;top: calc( 10% + 60vw )"></div>
- </div>
- <img style="width:200vw;position:absolute;left:0;top:0;" src="http://test.h3399.cn/uploads/imgs/201804/1523953618303.jpg" />
- <script>
- // 位置坐标
- var coordinate = {
- cover:[
- [],// 上左
- [],// 上右
- [],// 下左
- [],// 下右
- ],
- img:[
- [],// 上左
- [],// 上右
- [],// 下左
- [],// 下右
- ]
- }
- var img2;
- window.onload = function() {
- init();// 初始化
- }
- // 初始化
- function init() {
- var img = document.querySelector('img');
- // 坐标 - 覆盖层
- var covers = document.querySelectorAll('div.cover div');
- //X 坐标
- coordinate['cover'][0] = [covers[0].offsetWidth,0];
- coordinate['cover'][2] = [covers[0].offsetWidth,0];
- coordinate['cover'][1] = [covers[0].offsetWidth+covers[2].offsetWidth,0];
- coordinate['cover'][3] = [covers[0].offsetWidth+covers[2].offsetWidth,0];
- //Y 坐标
- coordinate['cover'][0][1] = covers[2].offsetHeight;
- coordinate['cover'][1][1] = covers[2].offsetHeight;
- coordinate['cover'][2][1] = covers[3].offsetTop;
- coordinate['cover'][3][1] = covers[3].offsetTop;
- // 图片宽高 必须大于等于 窗口
- var width = img.offsetWidth;
- while (coordinate['cover'][1][0]-coordinate['cover'][0][0]>img.offsetWidth) img.style.width = (++width)+'px';
- while (coordinate['cover'][2][1]-coordinate['cover'][0][1]>img.offsetHeight) img.style.width = (++width)+'px';
- // 坐标 - 图片
- //X 坐标
- coordinate['img'][0] = [img.offsetLeft,0];
- coordinate['img'][2] = [img.offsetLeft,0];
- coordinate['img'][1] = [img.offsetLeft+img.offsetWidth,0];
- coordinate['img'][3] = [img.offsetLeft+img.offsetWidth,0];
- //Y 坐标
- coordinate['img'][0][1] = img.offsetTop;
- coordinate['img'][1][1] = img.offsetTop;
- coordinate['img'][2][1] = img.offsetTop + img.offsetHeight;
- coordinate['img'][3][1] = img.offsetTop + img.offsetHeight;
- // 图片信息
- img2 = {'width':img.offsetWidth,'height':img.offsetHeight,'top':img.offsetTop,'left':img.offsetLeft};
- //console.log(coordinate);
- // 图片必须在 窗口内
- for (var i=0;i<4;i++) {
- var c1 = coordinate['img'][i];
- var c2 = coordinate['cover'][i];
- if(i==0) {
- if (c2[0]<c1[0]) img.style.left = c2[0]+'px';
- if (c2[1]<c1[1]) img.style.top = c2[1]+'px';
- }
- if(i==1) {
- if (c2[0]>c1[0]) {img.style.left = (c2[0]-img.offsetWidth)+'px';}
- if (c2[1]<c1[1]) {img.style.top = (c2[1])+'px';}
- }
- if(i==2) {
- if (c2[0]<c1[0]) {img.style.left = c2[0]+'px';}
- if (c2[1]>c1[1]) {img.style.top = (c2[1]-img.offsetHeight)+'px';}
- }
- if(i==3) {
- if (c2[0]>c1[0]) {img.style.left = (c2[0]-img.offsetWidth)+'px';}
- if (c2[1]>c1[1]) {img.style.top = (c2[1]-img.offsetHeight)+'px';}
- }
- }
- }
- var touches=[];
- // 手指接触屏幕
- document.addEventListener('touchstart', function(e) {
- // 大于 2 个手指跳过
- if (touches.length>=2) return;
- // 没有手指时 初始化 图片信息
- if (touches.length==0) {
- init();// 初始化
- }
- for (var i=0;i<e.touches.length;i++) touches[e.touches[i]['identifier']] = e.touches[i];
- }, false);
- // 手指在屏幕上滑动
- document.addEventListener('touchmove',function(e) {
- // 是 1 个手指 移动
- if(touches.length==1) {
- var img = document.querySelector('img');
- img.style.left = parseFloat(e.touches[0].pageX)-parseFloat(touches[0].pageX)+img2['left']+"px";
- img.style.top = parseFloat(e.touches[0].pageY)-parseFloat(touches[0].pageY)+img2['top']+"px";
- return;
- }
- // 是 2 个手指 缩放
- if(touches.length==2) {
- // 判断手指距离
- var sx = Math.abs(touches[0].pageX - touches[1].pageX);
- var ex = Math.abs(e.touches[0].pageX - e.touches[1].pageX);
- var cx = (ex-sx)*1.6;
- var img = document.querySelector('img');
- img.style.width = (img2['width']+cx)+'px';
- return;
- }
- }, false);
- // 手指离开屏幕
- document.addEventListener('touchend', function(e) {
- // 删除离开的手指
- var ids = Object.keys(touches);
- for (var i=0;i<e.changedTouches.length;i++) {
- var id = e.changedTouches[i]['identifier'];
- touches.splice(ids.indexOf(id),1);
- }
- // 初始化 没离开的手指
- for (var i=0;i<e.touches.length;i++) touches[e.touches[i]['identifier']] = e.touches[i];
- init();// 初始化
- }, false);
- </script>
- </body>
- </html>
来源: