代码凌乱，自己写的绝对能用！
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding:0px;margin:0px;}html{height:100%;}body{height:100%;}.main{width: 3.75rem;position: relative;height:100%; margin: 0 auto; background: #eee}.main h1{font-size:0.16rem;}.main img{max-width: 100%}.box {width: 3.75rem;height:100%;background: #333;position: absolute;top:0px;left:0px;margin: 0 auto;align-items: center; /*定义body的元素垂直居中*/justify-content: center; /*定义body的里的元素水平居中*/display: none;overflow: hidden}.box img{width:100%;position: absolute; }</style><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script type="text/javascript">(function (doc, win) {//这段代码是做手机端rem适应的var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (clientWidth>640){clientWidth=640 }if (!clientWidth) return;else{docEl.style.fontSize = clientWidth / 3.75 + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);</script></head><body><div class="main"><h1>点击这个图片进行预览</h1><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545628346247&di=f2fcd4f88291e0f60d6599602ee8ab20&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3304533311%2C1137740692%26fm%3D214%26gp%3D0.jpg"/><div class="box"><img src="" /></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var pimg=document.querySelector("img");var oImg = document.querySelector(".box img");var oBox = document.querySelector(".box");pimg.onclick=function(){oBox.style.display="flex"oImg.src=pimg.src}oBox.onclick=function(){oBox.style.display="none"oImg.src=''}var hammer = new Hammer(oImg);//hammer实例化hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});//激活pan(移动)功能hammer.get('pinch').set({enable: true});//激活pinch(双指缩放)功能hammer.on("panstart", function(event) {var left = oImg.offsetLeft;var tp = oImg.offsetTop;hammer.on("panmove", function(event) {oImg.style.left = left + event.deltaX + 'px';oImg.style.top = tp + event.deltaY + 'px';});})hammer.on("pinchstart", function(e) {hammer.on("pinchout", function(e) {oImg.style.transition = "-webkit-transform 300ms ease-out";oImg.style.webkitTransform = "scale(2.5)";});hammer.on("pinchin", function(e) {oImg.style.transition = "-webkit-transform 300ms ease-out";oImg.style.webkitTransform = "scale(1)";});})</script></body></html>
![[Android] 通过Menu实现图片怀旧、浮雕、模糊、光照和素描效果](https://img-blog.csdn.net/20141102193837437)
